Gijsberts Gijsberts - 1 month ago 5
Javascript Question

Class on click not working JQuery

Im working on a sidebar what must be smaller if I click on a system button. So my plan is to add classes to different div's to adjust the style so it will become smaller etc.

Unfortunately my code is not working. I've tried it with a simple class with display none, but if I click on the class it will not apply the css. Here is my code:

<aside>
<h2 class="menu-head-text">Menu options</h2>
<a href="#" class="menu-size">
<i class="fa fa-bars"></i>
</a>
<ul>
<li><a href="nieuwewall.html"><i class="fa fa-folder-open"></i><span class="menu-item-text">Overzicht wall</span></a></li>
<li><a href="nieuwewall.html"><i class="fa fa-credit-card"></i><span class="menu-item-text">Betaalgegevens</span></a></li>
</ul>
</aside>


$(function() {
$(".menu-size").click(function() {
$(".menu-item-text").addClass(".display");
});
});


.display {
display: none !important;
}


Hope somebody can help me out. Thanks in advance

Answer

Try this one. Remove the . in the display

$(function() { //run when the DOM is ready
    $(".menu-size").click(function() { //use a class, since your ID gets mangled
        $(".menu-item-text").addClass("display"); //add the class to the clicked element
    });
});
Comments