Code snippets for a tutorial on drop down sidebar widgets & content blocks in WordPress. See also: https://gist.github.com/zoerooney/5632182 Tutorial link: http://zoerooney.com/blog/tutorials/faqs-lists-and-jquery-how-to-create-drop-down-content-blocks/

in-page-dropdown.css

.question:hover {
  cursor: pointer;
  opacity: 0.6;
}

/* Not much to see here - most of the action-oriented code has been moved to the jQuery */

in-page-dropdown.html

<div class="faq-block">
  <h3 class="question">
    This would be the question text?
  </h3>
  <div class="answer">
    Yes, it would be. And this would be the answer. Writing dummy content is hard.
  </div>
</div>

in-page-dropdown.js

jQuery(document).ready(function($){
  // Hide the answers using jQuery
  $('.answer').hide();
  
  // If you want the first one to show as a visual hint to the user, uncomment the next line
  //  $('.faq-block:first-of-type .answer').show();
  
  $('.question').click( function() {
    // if you want to have all others close when you click to open an item, uncomment the next line
    // $('.answer').hide();
    
    $(this).next().animate({
      
      // The combo of height and opacity gives a nice open-and-fade effect
      height: 'toggle',
      opacity: 'toggle',
  
    });
  });
  
});

in-page-dropdown.php

<?php if ( get_field('qa_block') ) : while ( has_sub_field('qa_block') ) : ?>
  <div class="faq-block">
    <h3 class="question">
      <?php the_sub_field('question'); ?>
    </h3>
    <div class="answer"><!-- This is not very semantic, but is necessary to group anything the site owner might put into the WYSIWYG -->
      <?php the_sub_field('answer'); ?>
    </div>
  </div>
<?php endwhile; endif; ?>