Code snippets for a tutorial on drop down sidebar widgets & content blocks in WordPress. See also: https://gist.github.com/zoerooney/5632470 Tutorial link to come.

sidebar-dropdown-function.php

<?php
register_sidebar( array(
  'name' => 'sidebar',
  'id' => 'sidebar-1',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );
?>

sidebar-dropdown.css

/* Make the effect more obvious to users by giving them a hover effect and the pointer cursor to show the titles are clickable */
.widget.expand .widget-title:hover {
  cursor: pointer;
  opacity: 0.6;
}

/* BONUS: Add some fancy arrow indicators next to the titles that switch direction on click */
.widget.expand .widget-title::after {
  content: '\25BC'; /* Oh hey there, fancy entity, you are impossible to remember: http://www.evotech.net/articles/testjsentities.html */
  color: #ffdd00;
  padding-left: 20px;
  font-size: 10px;
}
.widget.expand.collapse .widget-title::after {
  content: '\25B2';
}

sidebar-dropdown.html

<aside id="widget-name" class="widget widget_type expand">
  <h3 class="widget-title sb-dropdown">
    TITLE
  </h3>
  <div class="textwidget">
    This would be the content of the widget.
  </div>
</aside>

sidebar-dropdown.js

jQuery(document).ready(function($){
	
  // Updated to hide the content areas with jQuery rather than CSS
  $('.widget.expand > form, .widget.expand > div, .widget.expand > ul').hide();
  
  // Selecting the appropriate widgets using our newly added class
  // The action is actually on the click on the title, so that's what we're ultimately selecting
  $('.widget.expand .widget-title').click( function() {
    
    // We're using $(this) to ensure that the title click is only impacting its own widget
    // And the .next() ensures that we're impacting the immediately following sibling
    $(this).next().animate({
      
      // The combo of height and opacity gives a nice open-and-fade effect
      height: 'toggle',
      opacity: 'toggle',
  
    });
  });
  
  // This next bit is for the fun bonus arrow indicators (see the CSS)
  $('.widget.expand .widget-title').click(function(){
    $(this).parent().toggleClass('collapse');
  });
	
});