CODEWITHSUNDEEP
jqueryhtmlcss
user2918348
user2918348

Reputation:

Slide Toggle won't work properly (icons are not properly changing)

Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum

Upvotes: 2

Views: 243

Answers (4)

Joke_Sense10
Joke_Sense10

Reputation: 5402

Try this:

$("#toggle > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
    $('#toggle ul').slideUp();  
    $("span.minus-btn").removeClass('minus-btn'); // When slide goes up remove 'minus-btn' class
}
$(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {

     $("#toggle > li > div").removeClass("active");
     $(this).addClass('active');

if($(this).hasClass("active")){
   $("span.plus-btn", this).toggleClass('minus-btn');
     }
});

Demo

Upvotes: 1

Jobin
Jobin

Reputation: 8282

Try this,

$("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();
         $("span.minus-btn").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {
        $("#toggle > li > div").removeClass("active");
        $(this).addClass('active');

if($(this).hasClass("active")){
       $(this).find("span.plus-btn").toggleClass('minus-btn');
 }

});

Demo

Upvotes: 0

Payam Shakibafar
Payam Shakibafar

Reputation: 1125

you should remove 'minusbtn' class when it slides up.

replace this with your code :

 $("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();
        $("#toggle *").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {
      $("#toggle > li > div").removeClass("active");
         $(this).addClass('active');

     if($(this).hasClass("active")){
        $("span.plus-btn", this).toggleClass('minus-btn');
    }
});

Upvotes: 0

ilovemondays
ilovemondays

Reputation: 18

You change the plus/minus icons only on the clicked element. You could change all span elements to "plus-btn" and than the active one to minus. Like you first remove all active classes $("#toggle > li > div").removeClass("active");

Update:

$("#toggle > li > div").click(function() {
      $("#toggle > li > div").removeClass("active");
      $(this).addClass('active');      

     if($(this).hasClass("active")){
        $("span.plus-btn", this).toggleClass('minus-btn');
     } else {
         $('.minus-btn').removeClass('minus-btn');
     }
});

Fiddle Demo

Upvotes: 0

Related Questions