A Simple jQuery Accordion

No need for the overhead of a plugin.

In this case, I have a custom post type for FAQs, where the title is the question, and the content is the answer.

This script hides all the answers until one of the questions is clicked.

Here’s the JavaScript:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.accordion').on('click', function() {
            $parent_box = $(this).closest('.faqbox');
            $parent_box.siblings().find('.panel').hide();
            $parent_box.find('.panel').toggle();
        });
    });
</script>

And the HTML:

<?php while ( have_posts() ) : the_post(); ?>

     <div class="faqbox">
          <h4 class="accordion"><i class="fa fa-plus-square" aria-hidden="true"></i> <?php the_title(); ?></h4>
          <div class="panel"><?php the_content(); ?></div>
     </div>

<?php    endwhile; ?>

 

Then, this little bit of CSS brings it together:

.faqbox { margin: 1em 0 0;
  .panel { display: none;  margin-left: 1em; }
  .accordion { cursor:pointer; }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to toolbar