使用jquery切换手风琴里面的按钮

Question

我想在手风琴里面创建一个切换按钮。这是我想要做的。

的Javascript

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

HTML是：

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

这是我想做的事：

当我打开手风琴，我应该看到文本 “这里的一些内容” 和“隐藏”按钮。当我点击隐藏按钮时，应该打开“jhfsnv jv jsdhv jsdvb”这个内容。

我想在手风琴的所有选项上保留“隐藏”按钮。所以不同的手风琴选项将隐藏按钮，但内容不同。 （有没有简单的方法来保持所有隐藏按钮的id和他们包含的文本相同（尽管点击隐藏按钮时的内容不同））但是所有这些不同的内容都在不同的手风琴选项中。

Answer 1

试试这个请工作演示http://jsfiddle.net/stXP6/或http://jsfiddle.net/z8Jns/

哦，你的HTML是无效的我已经纠正了一点，现在使用的类。即id定义了元素的身份，因此它应该是唯一的。

希望它适合你的需要:)

代码

$(".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​​