I have a toggle, and currently it works like this:

if `.member-button` is clicked it will add `.active-sub` to `.member-button` and remove it from `.trainer-button`. It will also display `#member` while hiding `#trainer`

`.trainer-button` works the same way adding `.active-sub` to `.trainer-button` while removing it from `.member-button` and it will display `#trainer` while hiding `#member`.

---

What I'm having trouble with is when the page first loads, how do I check if `.active-sub` is added to `.member-button` and if it is, to remove it from `.trainer-button`? (and vice versa)

I would also like to check if `#member` is not set to `$("#member").hide();` then to automatically hide `#trainer`

---

**Javascript:**

```
<script type="text/javascript">
    $(document).ready(function(){

        //$("#member").hide();
        $("#fitness-trainer").hide();
        $('.member-button').addClass("active-sub");

        $('.member-button').click(function () {
            $("#fitness-trainer").fadeOut(function () {
                $("#member").fadeIn();
            });
            $(".trainer-button").removeClass("active-sub");
            $(this).addClass("active-sub");
        });

        $('.trainer-button').click(function () {
            $("#member").fadeOut(function () {
                $("#fitness-trainer").fadeIn();
            });
            $(".member-button").removeClass("active-sub");
            $(this).addClass("active-sub");
        });
    });
</script>

```

**HTML: Buttons**

```
<a href="#" class="member-button">Member</a>
<a href="#" class="trainer-button">Trainer</a>

```

**HTML: Content**

```
<div id="member">
member content
</div>

<div id="trainer">
trainer content
</div>

```