Change elements/classes in/with jquery

Question

I'm new in jQuery and used it right now for a navigation, that slides in and out in mobile or small views. That works fine and correct, but I'm using a plus-icon to open a submenu, that changes into a minus-icon, when the submenu is opened.

But it doesn't change back into the plus-icon, when the submenu is closed.

The code is the following:

$(document).ready(function() {

    $('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');


    $('#menu-toggle').click(function() {
        $(this).next('#navigation-main').slideToggle();
    });

    $('.menu-expander').click(function() {
        $(this).prev('.level_2').slideToggle();
        $(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
    });

});

I think the "interesting" part might be the second function, the first is still for a hamburger-icon, that opens the navigation, that works (okay, it doesn't show a sliding animation, what the second one do... no idea, why it don't works...).

So the second part is for the plus. When I click on the plus, the submenu slides in and the plus changes to the minus, but when I click back to the the minus it doesn't change back to the plus.

Has somebody any idea why it doesn't work or can explain me, how I can do it work?

Regards, Markus

Answer 1

The problem is that your selector is trying to find a span with both plusicon and vertical classes but after the first call to this:

$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');

wich removes said classes, it is not able to find your target span .

To work around this you could assign an id ( iconId on the next example) or another class to your icon so it can be allways found

$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');

...

$('.menu-expander').click(function() {
  $(this).prev('.level_2').slideToggle();
  $(this).children('#iconId').toggleClass('plusicon vertical');
});

Answer 2

Do this :

$('.menu-expander').click(function() {
        $(this).prev('.level_2').slideToggle();
        var $icon = $(this).children('#ID OF ELEMENT'); // Would be easier to add an ID to your element whcih you want to alter - limits the error possibilties :)
        if($icon.hasClass("CLASS YOU WANT TO GET RID OF"){
          $icon.removeClass("CLASS YOU WANT TO GET RID OF");
          $icon.addClass("THE CLASS YOU NEED");
        else{
          $icon.addClass("THE CLASS YOU WANT TO ADD");
        }
    });

I am at work now so pardon any typing errors. You basically need to check whether the class that changes the icon to a MINUS symbol is still active - if so you change it back.

Answer 3

I hope it will help.

Points:

1. to find element good to use find();
2. better toggle 1 class to show hide element like "show" in example;
3. With elements inserted with js code better use .on() (for future);

 $(document).ready(function() { $('<span class="menu-expander"><span class="plusicon horizontal">horizontal</span><span class="plusicon vertical show">vertical</span></span>').insertAfter('.level_2'); $('#menu-toggle').click(function() { $('#navigation-main').slideToggle(); }); $('.menu-expander').click(function() { $(this).prev('.level_2').slideToggle(); $(this).find('.plusicon').toggleClass('show'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .plusicon {display:none} .show {display:block!important} </style> <ul> <li id="menu-toggle" class="level_2">Toggle</li> </ul> <ul id="navigation-main"> <li>test</li> </ul>