以顯示和隱藏內容在手風琴

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