引導摺疊多個按鈕和DIV

我已經看到了崩潰的這個例子中w3school引導摺疊多個按鈕和DIV

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Simple Collapsible</h2> 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> 
    <div id="demo" class="collapse"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
</div> 

</body> 
</html>

但我的問題是，當我想用2鍵和2格，像我有2個按鈕按鈕會發生什麼1將是我的第一個按鈕和按鈕2將是我的第二個按鈕和我有2個div div div 1將可見當我點擊按鈕1但當我點擊按鈕2我想隱藏第一個div並顯示第二個div，並隱藏第二個並先顯示，

這裏是多個分區的代碼

<div class="container" ng-app="myApp" ng-controller="customersCtrl"> 
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Company Details</button> 
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1">Commercial Details</button> 
    <div id="demo" class="collapse" > 
     1st div 
    </div> 

    <div id="demo1" class="collapse"> 
    2nd div 
    </div> 
</div>

任何人都可以幫我

來源

2016-11-03 Ibrahim Shaikh

這聽起來像使用白手起家手風琴會給你想要的效果：http://getbootstrap.com/javascript/#collapse-example-accordion

它可以讓你打開一個時，例如崩潰其他的div。

來源

2016-11-03 11:45:40 Stuart

您可以使用任何手風琴插件來實現此目的。

如果你想要去的一小塊代碼，請與本：

$('#btn1').click(function(){ 
 
    $('.collapse').hide(); 
 
    $('#demo').show(); 
 
}); 
 
$('#btn2').click(function(){ 
 
    $('.collapse').hide(); 
 
    $('#demo1').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" ng-app="myApp" ng-controller="customersCtrl"> 
 
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo" id="btn1" >Company Details</button> 
 
    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1" id="btn2">Commercial Details</button> 
 
    <div id="demo" class="collapse" > 
 
    1st div 
 
    </div> 
 

 
    <div id="demo1" class="collapse"> 
 
    2nd div 
 
    </div> 
 
</div>

來源

2016-11-03 12:05:44

引導摺疊多個按鈕和DIV

回答

相關問題