jquery toggleClass does not switch css classes when navbar-toggle is clicked-CodePudding

I'm using Bootstrap 3 and I have a div like this:

<div  style="margin-top:35px !important">
    <div >
        <div >
            <button type="button" >Login</button>
        </div>
    </div>
    <div >
        <div >
            <button type="button"  style="margin-top:5px;">Register</button>
        </div>
    </div>
</div>

Now I want to switch from user-actions-show class to user-actions-off class which is used for buttons, when the the navbar-toggle is clicked by using jQuery toggleClass:

<script>
        $(".navbar-toggle").click(function(){
            $("user-actions-show").toggleClass("user-actions-off");
        })
</script>

And this is how the class .user-actions-off looks like:

.user-actions-off{
     display:none;
}

But now the problem is it does not work out.

So what am I doing wrong here? How can I properly hide those buttons when the navbar-toggle is clicked?

UPDATE:

And this is the navbar-toggle class:

<button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
</button>

CodePudding user response：

You are missing the . in your script.

Change $("user-actions-show").toggleClass("user-actions-off");

to $(".user-actions-show").toggleClass("user-actions-off");

That should solve it.

CodePudding user response：

just create a class which name is .hide and toggle it to Your $(".user-actions-show") it'll override your existing css property to latest css property