javascript - HTML-Bootstrap: How to make collapsible text appear under its own button -
i using bootstrap use collapsible text.
using 2 button collapsing , corresponding collapsible text.
problem text appearing @ end of buttons instead of appearing after respective buttons.
here trying when clicking buttons (text appear below button):
------------ | button-1 | ------------ text button-1 ------------ | button-2 | ------------ text button-2
but here getting:
------------ | button-1 | ------------ ------------ | button-2 | ------------ text button-1
here code have written:
<h2>simple collapsible</h2> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text1">button-1</button><br/> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text2">button-2</button> <div id="text1" class="collapse"> text should appear under button-1 </div> <div id="text2" class="collapse"> text appear under button-2 </div>
any highly appreciated!
simply moving div
s should fix issue
<h2>simple collapsible</h2> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text1">button-1</button> <div id="text1" class="collapse"> text should appear under button-1 </div> <br/> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#text2">button-2</button> <div id="text2" class="collapse"> text appear under button-2 </div>
Comments
Post a Comment