I have a script to show/hide one div but want to modify, or use a different one, to show multiple. Each heading should act as the link to show/hide, should be viewable on page load and the contents below both hidden on page load. Example source:

Code:
<h2 class="trigger">Menu</h2>
<div class="hidden">
blah blah
</div>
<h2 class="trigger">Search</h2>
<div class="hidden">
search stuff
</div>
Not fussed if div classes need changed or IDs used. Currently this is what I use to show/hide one div

Code:
<script type="text/javascript">
    $(".hidden").hide();
     $("h2.trigger").toggle(function(){
         $(this).addClass("active");
          }, function () {
         $(this).removeClass("active");
     });
          $("h2.trigger").click(function(){
         $(this).next(".hidden").slideToggle("slow,");
     });
 </script>

Can anyone help or point me to a (easy to follow!) working script? Many thanks.