bootstrap div摺疊並展開

我想單獨展開和摺疊具有相同ID的div元素，當我單擊不同的按鈕時。bootstrap div摺疊並展開

這裏是我的HTML代碼

<body> 
    <button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem"> 
     <span class="glyphicon glyphicon-collapse-down"></span> Show Status 
    </button> 
    <div class="collapse" id="dem"> 
     <p>This is first</p> 
    </div> 
    <button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem"> 
     <span class="glyphicon glyphicon-collapse-down"></span> Show Status 
    </button> 
    <div class="collapse" id="dem"> 
     <p>This is Second</p> 
    </div> 
    <button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem"> 
     <span class="glyphicon glyphicon-collapse-down"></span> Show Status 
    </button> 
    <div class="collapse" id="dem"> 
     <p>This is Third</p> 
    </div> 

</body>

這裏是我的腳本

$(function(){ 

    $('#dem').on('show.bs.collapse', function() { 
     $('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide Status'); 
    }) 
    $('#dem').on('hide.bs.collapse', function() { 
     $('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show Status'); 
    }) 
})

當我點擊第一個按鈕，它擴展了，當我點擊第二個或第三個按鈕第一個按鈕崩潰的內容。內容不擴展其他按鈕。我知道我錯過了一些腳本代碼，但我不知道代碼是什麼。

來源

2014-12-04 Premkumar

ID值必須是唯一的。改用類。 – MSTannu 2014-12-04 16:38:01

文檔中不應有多個元素具有相同的ID。如果你想通過Javascript將元素分組在一起，你應該給他們一個普通的類。 – 2014-12-04 16:38:14

ID應始終爲DISTINCT。

更改這些上課......因爲你使用jQuery，你可以做這樣的事情的點擊事件裏面......

$(".className").hide() 
$(".className").show() 
$(".className").toggle()

假設他們有不同的ID，這種變化只會是這樣的...

$("#button1").on('click', function() { 
    if ($(this).is(":visible")) { 
    $(".className").hide() 
    } else { 
    $(".className").show() 
    } 
});

來源

2014-12-04 16:38:23 rfornal

行..好吧..感謝.. – Premkumar 2014-12-04 16:42:43

很高興我能幫到你！ – rfornal 2014-12-04 16:43:03

你可以給我使用類的代碼 – Premkumar 2014-12-04 16:53:10

bootstrap div摺疊並展開

回答

相關問題