如何使用jQuery Bootstrap在按钮单击上显示特定的div

Question

I have four buttons in a button group and I want a specific button has to show some specific div content on its click.

The content has to show according to which button is clicked.

How can I do this using twitter bootstrap jQuery in asp.net?

Answer 1

Below is a way to do with jQuery

$('.btn-group').find('button').click(function () {
    alert($(this).text());
    // here you can check the value and act upon
});

JSFiddle

Answer 2

You can use bootstrap Collapse . According to the documentation:

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

Here is a basic demo. http://www.bootply.com/jIyBm4IaoL .

HTML:

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo1">
    btn1 
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2">
    btn2
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo3">
    btn3
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo4">
    btn4
</button>
<div id="demo1" class="collapse">
    ddassdfsdf
</div>
<div id="demo2" class="collapse">
    2343434  
</div>
<div id="demo3" class="collapse">
    465656 vbgtrsdf
</div>
<div id="demo4" class="collapse">
    4545bn c sasdasdfasd
</div>