有問題切換多個div

Question

我的問題是這樣的，我有三個單獨的部分在我的頁面中顯示產品/服務的示例，我需要的是在每個特定部分的下方添加一個切換div，以顯示關於產品，但另一個顯示的部分必須在錨點被點擊時關閉。

一個例子可以在這裏看到：http://www.bamboohr.com/tour.php。

我想複製的方式，其中div顯示進一步的信息。

任何幫助將不勝感激，謝謝。

這裏是我的代碼：

-container-

-section ID = 「服務」 -

-div-

-a HREF = 「」 -/A- （ - ！===錨將打開DIV === - ）

-/div-

-div - /格 - （ - ！=== DIV將打開=== - ）

- /本條

-section ID = 「服務」 -

-div-

-a HREF = 「」 -/A- （ - ！===錨將打開DIV === - ）

-/div-

-div - /格 - （ - ！===格，將打開=== - ）

- /本條

-section ID = 「服務」 -

-div-

-a HREF = 「」 -/A-（ - ！===錨將打開DIV === - ）

-/div-

-div - /格 - （ - ！===格，將打開=== - ）

- /本條

-/container-

Answer 1

Jquery UI手風琴控制可能是你需要的。

退房此鏈接：http://jqueryui.com/accordion/

Answer 2

您使用jQuery的利用的

的 slideToggle功能

嘗試一下fiddle

HTML

<div class="box">Click div1</div> 
<div class="toggle_div">this is the content of toggle div 1</div> 
<div class="box">Click div2</div> 
<div class="toggle_div">this is the content of toggle div 2</div> 
<div class="box">Click div3</div> 
<div class="toggle_div">this is the content of toggle div 3</div> 

CSS

.box { 
    margin-bottom: 20px; 
} 
.toggle_div { 
    border: 1px solid #000; 
    background: #000; 
    color: #fff; 
    display: none; 
} 

JS

$('.box').click(function() { 
    $('.active').slideToggle('slow', function() { 
     $(this).removeClass('active'); 
    }); 
    $(this).next('div').addClass('active').slideToggle("slow") 
});