javascript - jQuery expandable div with plus and minus icons - Stack Overflow

admin管理员组

文章数量:1295295

I'm trying to create a simple accordion div that opens upwards. I have my accordion working nicely. But I now want to add plus and minus icons to the accordion.

I have it somewhat working below on codepen here.

HTML

<div class="accordion">
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>

Javascript

var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();

$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});

$(".accordion h3").click(function() {
  //Inner 
  var jqInner = $(this).next();
  if (jqInner.is(":visible")) {
    jqInner.slideUp()
    $(this).find('.plus').html('+');
  } else

  {
    jqInner.slideDown()
    $(this).find('.plus').html('-');
  }
})

As you can see, the accordion works nicely, and i have my plus and minus icons somewhat working. The problem is that when the accordion is expanded, the icon turns into a minus like expected, but when the accordion is closed again, the icon remains a minus when it should have gone back to a plus.

I'm trying to create a simple accordion div that opens upwards. I have my accordion working nicely. But I now want to add plus and minus icons to the accordion.

I have it somewhat working below on codepen here. http://codepen.io/Davabo/pen/jqzgxQ

HTML

<div class="accordion">
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>

Javascript

var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();

$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});

$(".accordion h3").click(function() {
  //Inner 
  var jqInner = $(this).next();
  if (jqInner.is(":visible")) {
    jqInner.slideUp()
    $(this).find('.plus').html('+');
  } else

  {
    jqInner.slideDown()
    $(this).find('.plus').html('-');
  }
})

As you can see, the accordion works nicely, and i have my plus and minus icons somewhat working. The problem is that when the accordion is expanded, the icon turns into a minus like expected, but when the accordion is closed again, the icon remains a minus when it should have gone back to a plus.

• javascript
• jquery
• html
• css

Share Follow edited Apr 15, 2016 at 11:39 Gimby 5,28244 gold badges3737 silver badges5050 bronze badges asked Apr 15, 2016 at 11:32 DavaboDavabo 11511 gold badge22 silver badges1010 bronze badges 1

• var jqInner = $(this).next(); is wrong. So the referenced element is never visible. $(this) refers to H3 in this case, you need the info span. – Yoeri Commented Apr 15, 2016 at 11:42

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Your code should be this: See codepen

      var $accordionIO = $('.accordion h3');
      $accordionIO.prev('div').hide();

      $(".accordion h3").click(function () {
          //Inner 
          var jqInner = $('.info', $(this).parent());
          if (jqInner.is(":visible"))
          {
              jqInner.slideUp()
              $(this).find('.plus').html('+');
          }

          else

          {
              jqInner.slideDown()
              $(this).find('.plus').html('-');
          }
    })

If I were you I'd handle this with CSS as much as I can.

In your css have this:

.accordion h3 .plus {
    content: "+";
}
.accordion h3 active .plus {
    content: "-";
}

Then in your jQuery, do this:

$(".accordion h3").click(function() {
  //Inner 
  var jqInner = $(this).next();
  jqInner.toggleClass("active");
  jqInner.toggleSlide();
})

Instead you can also create 2 spans for the '+' and the '-', and toggle their display property based on the 'active' class.

Make the following changes:

HTML - Remove the span assign .plus to h3

   <h3 class="plus"> More Info</h3>

CSS - Add these two classes to represent the state of the accordion.

       .plus:before {
  content: '+';
}
       .minus:before {
  content: '-';
}

jQuery - Remove the two lines for slideup/down and use $(this).toggleClass('plus minus') after the slideup/down.

    $(".accordion h3").click(function () {
          //Inner 
          var jqInner = $(this).next();
          if (jqInner.is(":visible"))
          {
              jqInner.slideUp()

          }

          else

          {
              jqInner.slideDown()

          }
        $(this).toggleClass('plus minus');
    })

CodePen

Snippet

 var $accordionIO = $('.accordion h3');
 $accordionIO.prev('div').hide();

 $accordionIO.click(function() {
   $(this).prev('div').slideToggle();
 });

 $(".accordion h3").click(function() {
   //Inner 
   var jqInner = $(this).next();
   if (jqInner.is(":visible")) {
     jqInner.slideUp()

   } else

   {
     jqInner.slideDown()

   }
   $(this).toggleClass('plus minus');
 })

.info {
  font-size: 16px;
  width: 70%;
  padding-bottom: 20px;
}
.plus:before {
  content: '+';
}
.minus:before {
  content: '-';
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="info">test text here</div>
  <h3 class="plus"> More Info</h3>
</div>

Try this

inside your code pan, condition if(jqInner.is(":visible")) is not working. every time you call function it moves to else part so it will not change - to +.

i have updated the code that working properly

var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();
$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});
$(".accordion h3").click(function() {
  var jqInner = $(this).next();
  jqInner.slideToggle();
  var t = $(this).find('.plus').html();
  t == "+" ? $(this).find('.plus').html('-') : $(this).find('.plus').html('+');
})

.info {
  font-size: 16px;
  width: 70%;
  padding-bottom: 20px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="accordion">
 <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>
<script src="https://code.jquery./jquery-2.2.3.min.js"></script>
<script>
var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();
$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});
$(".accordion h3").click(function() {
  $('.info').slideUp();
  $('.plus').html('+');
  var jqInner = $(this).prev();
  jqInner.slideToggle();
  var icon1 = $(this).find('.plus').html();
  icon1 == "+" ? $(this).find('.plus').html('-') : $(this).find('.plus').html('+');
})
</script>
</body>
</html>

According accordion functionality it should collapse other divs when one div is expanded. The expanded div will never collapse on clicking on it. The code works with same logic.

本文标签： javascriptjQuery expandable div with plus and minus iconsStack Overflow