Show/Hide Multiple Divs

JavaScript
1

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:


<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



<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.

2

What’s wrong with the script you posted? It seems to work, and it’s pretty much what I would have suggested, anyway.

3

What is it about the existing script that you’re not happy with?

4

I am new to Jquery.
I try toggleClass()
$(this).toggleClass(“active”);

  
<html>
<head>
<title> Untitled </title>
<style type="text/css">
  .active {color:red;};
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
// http://api.jquery.com/toggleClass/
// http://www.akifkaraagac.com/addclass-removeclass-toggleclass-jquery-css-isemleri/

$(document).ready(function(){
    $(".hidden").hide();
    $("h2.trigger").click(function(){
       $(this).toggleClass("active");
       $(this).next(".hidden").slideToggle("slow,");
    });
});
 </script>

</head>
<body>
<h2 class="trigger">Menu</h2>
<div class="hidden">
blah blah
</div>
<h2 class="trigger">Search</h2>
<div class="hidden">
search stuff
</div>
</body>
</html>