/*
  A simple "tool" to show/hide content in a web page.
  One example structure (from the /find page) it can support:

      <div class="show-hide">

        <div class="show-hide-control expand">
          <img src="plus.gif" class="expand"><img src="minus.gif" class="collapse">
        </div>

        <div class="show-hide-text">
          // Some (non-clickable, optional) text that could sit next to the control
        </div>

        <div class="show-hide-content">
          // All the content that is either displayed or hidden 
          // (when the show-hide-control element is clicked) goes here.
        </div>

      </div>
*/
$(document).ready(
    function(){
        $('.show-hide-control').each(function() {
            $(this).css('display', 'block');
            $(this).click(
                function(evt) {
                    evt.preventDefault();
                    if ($(this).hasClass('expand')) {
                        $(this).removeClass('expand').addClass('collapse')
                    } else if ($(this).hasClass('collapse)')) {
                        $(this).removeClass('collapse').addClass('expand');
                    }
                    $(this).parent().children('.show-hide-content').each( function() {$(this).toggle();} );
                }
            );
        });
    }
);