title: Toggle button inside accordion using jquery
body: <p>I want to create a toggle button inside an accordian. Here is what I was trying to do.</p>
  
  <p>Javascript</p>
  
  <pre><code>$j("div a").live('click', function() {
  $j("#toggleButton").click(function () {
        $j("#test p").slideToggle("slow");
      });
  });
  </code></pre>
  
  <p>HTML is:</p>
  
  <pre><code>  &lt;div id="accordion"&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Number 1&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;h4&gt; Error1:&lt;/h4&gt;&lt;p&gt; some contents here &lt;/p&gt;&lt;div id="content1"&gt;&lt;input type="button" value="Hide" id="toggleButton" style="float:right;"&gt;&lt;div id="test"&gt; &lt;p&gt;jhfsnv jv jsdhv jsdvb &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Number 2&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;h4&gt; Error2:&lt;/h4&gt;&lt;p&gt; some contents here &lt;/p&gt;&lt;div id="content1"&gt;&lt;input type="button" value="Hide" id="toggleButton" style="float:right;"&gt;&lt;div id="test"&gt; &lt;p&gt;jsa shsbc sjhv sf &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I want to do:</p>
  
  <p>When I open the accordion I should see the text "some contents here" and "Hide" button. When I click on the hide button the contents i.e."jhfsnv jv jsdhv jsdvb " should open. </p>
  
  <p>I want to keep the "hide" button on all options of accordion. So different accordion options will have hide button but with different contents.  (Is there a easy way to keep the id of all the hide buttons and the text they contains same (although the contents while clicking on hide button are different)) But all these different contents are within different accordion options.</p>