How to make a Bootstrap accordion collapse when clicking the header div?
In a Bootstrap accordion, instead of requiring a click on the a text, I want to make it collapse when clicking anywhere in the panel-heading div.
I am using Bootstrap 3. So instead of accordion, it's just a collapsible panel. Any idea how to do the entire panel clickable?
All you need to do is to to use...
data-toggle="collapse" data-target="#ElementToExpandOnClick" ...on the element you want to click to trigger the collapse/expand effect.
The element with data-toggle="collapse" will be the element to trigger the effect. The data-target attribute indicates the element that will expand when the effect is triggered.
Optionally you can set the data-parent if you want to create an accordion effect instead of independent collapsible, eg:
data-parent="#accordion" I would also add the following CSS to the elements with data-toggle="collapse" if they aren't <a> tags, eg:
.panel-heading {
cursor: pointer;
}
Here's a jsfiddle with the modified html from the Bootstrap 3 documentation.
Another way is make your <a> full fill all the space of the panel-heading . Use this style to do so:
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}
Check this demo (http://jsfiddle.net/KbQyx/).
Then when you clicking on the heading, you are actually clicking on the <a> .
I've noticed a couple of minor flaws in grim's jsfiddle.
To get the pointer to change to a hand for the whole of the panel use:
.panel-heading {
cursor: pointer;
}
I've removed the <a> tag (a style issue) and kept data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." on panel-heading throughout.
I've added a CSS method for displaying chevron, using font-awesome.css in my jsfiddle:
http://jsfiddle.net/weaversnap/7FqsX/1/
链接地址: http://www.djcxy.com/p/36612.html上一篇: 角色=按钮是什么意思？