Not sure if I'm doing this right. I have a menu that toggles between open and close. Now I want a button to show up if the menu hasClass("open");. and I would like to remove the class once the class open is gone.

Here is the HTML part;

<nav>
    <a class="closed"><i class="fa fa-bars"></i>Menu</a>
        <ul>
            <li>Menu items</li>
        </ul>
    <div class="close-btn">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
</nav>

The HTML works, so this is not that important, the important part is that the elements are: nav, a, closed.

Now for the jQuery part;

$(document).ready(function(jQuery) {
    if ($("nav a").hasClass("open")) {
        $(".close-btn").addClass('show-me-the-button');
    } else {
        $(".close-btn").removeClass('show-me-the-button');
    }
});

But this doesn't work. I've searched stackoverflow but all gave me this code... not sure why it isn't working. I get no script errors... any help?

Not sure if I'm doing this right. I have a menu that toggles between open and close. Now I want a button to show up if the menu hasClass("open");. and I would like to remove the class once the class open is gone.

Here is the HTML part;

<nav>
    <a class="closed"><i class="fa fa-bars"></i>Menu</a>
        <ul>
            <li>Menu items</li>
        </ul>
    <div class="close-btn">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
</nav>

The HTML works, so this is not that important, the important part is that the elements are: nav, a, closed.

Now for the jQuery part;

$(document).ready(function(jQuery) {
    if ($("nav a").hasClass("open")) {
        $(".close-btn").addClass('show-me-the-button');
    } else {
        $(".close-btn").removeClass('show-me-the-button');
    }
});

But this doesn't work. I've searched stackoverflow but all gave me this code... not sure why it isn't working. I get no script errors... any help?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 9, 2016 at 14:28 Steggie asked Dec 9, 2016 at 14:17 SteggieSteggie 5251010 silver badges3131 bronze badges 8

• 2 You need to run your code within the event handler that toggle the open/close class on the menu – Rory McCrossan Commented Dec 9, 2016 at 14:18
• 2 Your HTML does not have an element with the class .close-btn. – connexo Commented Dec 9, 2016 at 14:26
• Might need more info here so please edit. Are you trying to open and close by clicking on an item, or only on page load? Or are you trying to "detect" when it changes. If that's the case, you will need to create a different type of event. – Andrew Ice Commented Dec 9, 2016 at 14:27
• Your jQuery code is executed exactly once - on document.ready. – connexo Commented Dec 9, 2016 at 14:28
• @connexo I edited my HTML code. – Steggie Commented Dec 9, 2016 at 14:28

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

You check classes only on initial page load. Where do you change open class? You should move this code in that place.

User - oryol is correct

Try to put your code inside a handler like this:

$(document).ready(function(jQuery) {

    $('nav a').on('click', function(e) { // <----------- Click Handler (jQuery)

        // Use $(this) to access current clicked element
        if ($(this).hasClass("open")) {
            $(".close-btn").addClass('show-me-the-button');
        } else {
            $(".close-btn").removeClass('show-me-the-button');
        }

    })

});

See more about Click Handler in jQuery

Hope this helps!