Question

I want to create a toggle button inside an accordian. Here is what I was trying to do.

Javascript

$j("div a").live('click', function() {
$j("#toggleButton").click(function () {
      $j("#test p").slideToggle("slow");
    });
});

HTML is:

  <div id="accordion">
    <h3><a href="#">Number 1</a></h3><div><h4> Error1:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" id="toggleButton" style="float:right;"><div id="test"> <p>jhfsnv jv jsdhv jsdvb </p></div></div></div>
    <h3><a href="#">Number 2</a></h3><div><h4> Error2:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" id="toggleButton" style="float:right;"><div id="test"> <p>jsa shsbc sjhv sf </p></div></div></div>
  </div>

Here is what I want to do:

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.

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.

Answer 1

Try this please Working Demo http://jsfiddle.net/stXP6/ or http://jsfiddle.net/z8Jns/

Oh and your HTML ain’t valid I have rectified it a bit now using class. i.e. id defines identity of the element hence it should be unique.

Hope it fits your need :)

code

$(".test").hide();
$(".toggleButton").click(function() {
    $(this).next(".test").slideToggle("slow");
});​

HTML

<h3><a href="#">Number 1</a></h3><div><h4> Error1:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" class="toggleButton" style="float:right;"><div class="test"> <p>jhfsnv jv jsdhv jsdvb </p></div></div></div>
<h3><a href="#">Number 2</a></h3><div><h4> Error2:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" class="toggleButton" style="float:right;"><div class="test"> <p>jsa shsbc sjhv sf </p></div></div></div>
Here​​