以显示和隐藏内容在手风琴

Question

我有一个基本的jQuery的手风琴，显示一个列表。 在当前场景中，我希望某些内容可以通过单击按钮来隐藏，并且在再次单击按钮时再次可见。例如，

1) Title 1 
2) Title 2 
3) Title 3 
4) Title 4 

<input type='button' value='show/hide'> 

我希望标题2在用户点击按钮时隐藏和可见。

我用

document.getElementById("sec2").style.display == "block" 

这样做的手风琴被隐藏和可见的，但结构被破坏。即在“标题2”开放的情况下可见，而我希望它是封闭的。

这是标准Jquery Accordian。

<div id="accordion"> 
    <h3 id='sec1'>Section 1</h3> 
    <div id='div1'> 
    <p> 
    Title 1. 
    </p> 
    </div> 
    <h3 id='sec2'>Section 2</h3> 
    <div id='div2'> 
    <p> 
    Title . 
    </p> 
    </div> 
</div> 

Answer 1

嘿感谢您的答复球员，但一切只是似乎并不工作，所以我终于决定静态解决。以下是我的尝试。

$(function() { 
    for(var i = 3; i>=0; i--) 
    { 
    $("#accordion").accordion({ 
    active: i, 
    }); 
    } 
}); 

这最终的伎俩，关闭所有div的和离开顶部开口，而那也是用漂亮的动画....;）

Answer 2

你应该试试以下（与可折叠的选项是true）：

$('#accordion').accordion("activate" , 2) 

查看更多在这里：http://docs.jquery.com/UI/API/1.8/Accordion

Answer 3

试试这个：

<input type='button' id="myButton" value='show/hide'> 

$("#myButton").click(function() { 
    $("#sec2").toggle(); 
    $("#accordion").accordion("option", "active", false); 
    //or use $("#accordion").accordion("option", "active", index); to select the option you want to be active 
}); 

Answer 4

你可以使用jQuery中比前1.9.x的：看Demo

$("#btnToggle").toggle(function(){ 
    $("#div2>p").hide(); 
}, function(){ 
    $("#div2>p").show(); 
});