Multiple Accordion on one page I have two accordions on the same page 

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

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


On page1:

&lt;h3 class="trigger"&gt;&lt;div id="toggle-image"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Page1&lt;/div&gt;&lt;/h3&gt;
&lt;div class="toggle-container"&gt;


On page2:

&lt;h3 class="trigger2"&gt;&lt;div id="toggle-image2"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Page2&lt;/div&gt;&lt;/h3&gt;
&lt;div class="toggle-container2"&gt;


In the Javascript 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 {
            $('#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 redundant code I used in JS is typical and the difference is on the variable it uses. How could I make it dynamic?
Don't rely on IDs when your cases are general.  Rely on classes.  
Use the DOM hierarchy to reference elements


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

&lt;div&gt;
  &lt;h3 class="trigger"&gt;
    &lt;div id="toggle-image" class="toggle-image"&gt;
      &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Page1
    &lt;/div&gt;
  &lt;/h3&gt;
  &lt;div class="toggle-container"&gt;
  &lt;/div&gt;
&lt;/div&gt;


page2 (same changes):

&lt;div&gt;
  &lt;h3 class="trigger"&gt;
    &lt;div id="toggle-image2" class="toggle-image"&gt;
      &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Page2
    &lt;/div&gt;
  &lt;/h3&gt;
  &lt;div class="toggle-container"&gt;
  &lt;/div&gt;
&lt;/div&gt;


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;
      });
 });