CODEWITHSUNDEEP
javascriptjqueryhtml
Joe Bobby
Joe Bobby

Reputation: 2811

Check Class and If a DIV is hidden on Pageload

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>

Upvotes: 0

Views: 1101

Answers (2)

Ronophobia
Ronophobia

Reputation: 349

if($('.member-button').hasClass('active-sub'))
{
$('.member-button').removeClass('active-sub');
$('.trainer-button').addClass('active-sub');
}

and vice-versa.

And:

if($('#member').is(':visible'))
{
$('#trainer').hide();
}

Just like the previous answer.

Upvotes: 1

Swarne27
Swarne27

Reputation: 5747

Try using,

Check whether the .member-button has the class .active-sub by doing the following,

$('.member-button').hasClass('active-sub');

this will return true if it has the class

you can check whether the #member is set to .hide() by,

if($("#member").is(":visible")){
  // hide whatever you want here...
}else{
  // display whatever you want here..
}

Upvotes: 0

Related Questions