CODEWITHSUNDEEP
jqueryhtmlcss
Sam
Sam

Reputation: 1461

Adding icons to JQuery accordion

I have built the following super simple JQuery accordion: 

jQuery(document).ready(function($) {
    
 var allPanels = $('.accordion > div').hide();
    
  $('.accordion > h2 > a').click(function() {
    allPanels.slideUp().addClass("closed");

    if($(this).parent().next().css('display')=='none') {
        $(this).parent().next().slideDown().removeClass("closed");
    }

    return false;
  });

}); // End JQuery
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
</div><!-- .accordion -->

I have a class being added and removed to .content div, but would like instead to add it to the <h2> so I can add open and close symbols. Is this possible?

Upvotes: 4

Views: 1005

Answers (3)

Dragar
Dragar

Reputation: 1

You can simply do this:

jQuery(document).ready(function ($) {
    var allPanels = $('.accordion > div').hide();

    $('.accordion > h2 > a').click(function () {
        allPanels.css('display', 'none');
        allPanels.removeClass("closed");
        $(this).parent().addClass("closed");
        $(this).parent().next().slideDown();
        return false;
    });
}); // End JQuery

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can add/remove the class to the clicked element's parent like

jQuery(document).ready(function($) {

  var allPanels = $('.accordion > div');
  var allH2 = $('.accordion > h2');

  $('.accordion > h2 > a').click(function() {
    var $h2 = $(this).parent();
    allH2.not($h2).removeClass('active');
    allPanels.stop(true).slideUp().find('.accordion-heading').addClass("closed");

    if ($(this).parent().next().css('display') == 'none') {
      $(this).parent().next().slideDown().find('.accordion-heading').removeClass("closed");
    }
    $h2.toggleClass('active');

    return false;
  });

}); // End JQuery
.accordion .content {
  display: none;
}
.accordion h2.active:before {
  content: '-'
}
.accordion h2:before {
  content: '+'
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

</div>
<!-- .accordion -->

A more simplified version can be, with css 3

jQuery(document).ready(function($) {
  $('.accordion > h2').click(function(e) {
    e.preventDefault();

    var $this = $(this);

    $this.toggleClass('active');
    $this.next().stop()[$this.hasClass('active') ? 'slideDown' : 'slideUp']();
    $this.siblings('.accordion-heading').removeClass('active').next().stop().slideUp();
  });

}); // End JQuery
.accordion > .content {
  display: none;
}
.accordion > h2.active:before {
  content: '-'
}
.accordion > h2:before {
  content: '+'
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content" style="display: none;">
    <p>Here's the content</p>
  </div>
  <!-- .content -->

</div>
<!-- .accordion -->

Upvotes: 4

AmitJS94
AmitJS94

Reputation: 1212

You can use .find() function of jQuery to find the element with that class. You can also find the tag but it is a better practice to find it using a custom class. 

jQuery(document).ready(function($) {
    
 var allPanels = $('.accordion > div').hide();
    
  $('.accordion > h2 > a').click(function() {
    allPanels.slideUp().find('.accordion-heading').addClass("closed");

    if($(this).parent().next().css('display')=='none') {
        $(this).parent().next().slideDown().find('.accordion-heading').removeClass("closed");
    }

    return false;
  });

}); // End JQuery
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="accordion">
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
  <h2 class="accordion-heading"><a href="">Click me</a></h2>
  <div class="content">
    <p>Here's the content</p>					
  </div><!-- .content -->
</div><!-- .accordion -->

Upvotes: 1

Related Questions