bootstrap div свернуть и развернуть

Я хочу развернуть и свернуть элементы div с одинаковым id отдельно, когда я нажимаю различные кнопки.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

Значения идентификатора должны быть уникальными. Вместо этого используйте классы. – MSTannu

В документе не должно быть более одного элемента с тем же идентификатором. Если вы хотите группировать элементы вместе для выборки через Javascript, вы должны дать им общий класс. –

Идентификаторы всегда должны быть ОТЛИЧНЫМИ.

Изменение их на классы ... так как вы используете JQuery, вы можете сделать что-то подобное внутри событий щелчка ...

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

Предполагая, что они имеют разные идентификаторы, то изменение будет просто что-то вроде ...

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

источник

2014-12-04 16:38:23 rfornal

ok..got it..thanq .. – Premkumar

Рад, что я мог помочь! – rfornal

может дать мне код, используя класс – Premkumar

bootstrap div свернуть и развернуть

ответ

Смежные вопросы