Multiple Accordion on one page

I have 2 accordions on the same page .

First I have a page ,Freemarker, that includes 2 other Freemarkers that have the accordion.

[#include "page1.ftl"]
[#include "page2.ftl"]

On page1 :

<h3 class="trigger"><div id="toggle-image">&nbsp;&nbsp;&nbsp;&nbsp;Page1</div></h3>
<div class="toggle-container">

On page2:

<h3 class="trigger2"><div id="toggle-image2">&nbsp;&nbsp;&nbsp;&nbsp;Page2</div></h3>
<div class="toggle-container2">

on the Java Script file :

  $(document).ready(function(){
  $('#toggle-image').attr("class", "toggle-image-expand");
    //Hide (Collapse) the toggle containers on load
    $(".toggle-container").hide();

    $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");

        if($('#toggle-image').attr("class") == "toggle-image-collapse") {
            $('#toggle-image').attr("class", "toggle-image-expand");
        } else {开发者_StackOverflow社区
            $('#toggle-image').attr("class", "toggle-image-collapse");
        }
        return false;
    });
});

$(document).ready(function(){
  $('#toggle-image2').attr("class", "toggle-image-expand");
    //Hide (Collapse) the toggle containers on load
    $(".toggle-container2").hide();

    $("h3.trigger2").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");

        if($('#toggle-image2').attr("class") == "toggle-image-collapse") {
            $('#toggle-image2').attr("class", "toggle-image-expand");
        } else {
            $('#toggle-image2').attr("class", "toggle-image-collapse");
        }
        return false;
    });

It works fine but the redundunt code I used on js is typical and the difference is on the variable it uses . How could I make it dynamic !! });

1. Don't rely on IDs when your cases are general. Rely on classes.
2. Use the DOM hierarchy to reference elements

page1 (added a container div, "toggle-image" class name):

<div>
  <h3 class="trigger">
    <div id="toggle-image" class="toggle-image">
      &nbsp;&nbsp;&nbsp;&nbsp;Page1
    </div>
  </h3>
  <div class="toggle-container">
  </div>
</div>

page2 (same changes):

<div>
  <h3 class="trigger">
    <div id="toggle-image2" class="toggle-image">
      &nbsp;&nbsp;&nbsp;&nbsp;Page2
    </div>
  </h3>
  <div class="toggle-container">
  </div>
</div>

JavaScript (generalized with class selectors, sibling selectors, improved class logic):

 $(document).ready(function(){
      $('.toggle-image').attr("class", "toggle-image-expand");
      //Hide (Collapse) the toggle containers on load
      $(".toggle-container").hide();

      $("h3.trigger").click(function(){
          $(this).toggleClass("active").next().slideToggle("slow");

          $(this).children('.toggle-image')
              .toggleClass('toggle-image-collapse') 
              .toggleClass('toggle-image-expand');

          return false;
      });
 });

Is this the basic idea of what you're looking for:

http://jsfiddle.net/cgsfb/1/

$(document).ready(function(){
    var toggler = $('div[id*="toggle-image"]');
    toggler.attr("class", "toggle-image-expand");
    //Hide (Collapse) the toggle containers on load
    $("div[class*='toggle-container']").hide();

    $("h3[class*='trigger']").click(function(){
        var toggler_inner = $(this).find(toggler);
        $(this).toggleClass("active").next().slideToggle("slow");
        if (toggler_inner.attr("class") == "toggle-image-collapse") {
            toggler_inner.attr("class", "toggle-image-expand");
        } 
        else {
            toggler_inner.attr("class", "toggle-image-collapse");
        }
        return false;
    }); 
});