Bootstrap & Angular - Accordion switch not to header
I have a basic Bootstrap accordion in my Angular app.
By default, the accordion is activated by "header". I want you to be able to activate the accordion for the icon:
<h4 class="panel-title">
<a data-ng-click="selectItem()">
<span class="glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></span>
Collapsible Group Item #1
</a>
</h4>
This works great (in a way), but it doesn't give me the result I'm looking for.
In my application, people will be able to select an element by clicking on the title, clicking on "trigger" will display the children of that particular element (and not select it).
If you leave your code as it is, the item is selected as soon as I hit the accordion trigger (which I assume is the expected result).
I am looking for a solution to select an element while keeping the accordion (which will not select an element). I tried using event.stopPropagation, but while it doesn't allow the item to be selected with a trigger, the accordion doesn't work anymore.
Plunkr: http://plnkr.co/edit/GyuYP1sT6JWaZdLcTCS4?p=preview
Any ideas?
source to share
Plunker
Moved the chevron out of the "selection area" and created a "header-bar" span
that highlights pink on hover
and blue on click
without changing the chevron arrow color.
The chevron arrow only affects the accordion, while the title bar only affects highlight and highlight.
This is my interpretation of what you want. LMK if I leave.
<div sclass="" ng-class=" itemSelected ? 'item active' : 'item inactive'">
<div class="acc-toggle">
<a class="glyphicon glyphicon-chevron-down" style="display: inline-block"
data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
</a>
</div>
<span class="title-bar" data-ng-click="selectItem()" sng-class="{ 'active': itemSelected, 'inactive': itemSelected==false }" >
Collapsible Group Item #1
</span>
</div>
And made the baby span
pink on hover
and blue onclick
.acc-toggle {
background-color:
white; display: inline-block ;
padding: 5px;
}
.title-bar {
display: inline-block;
padding: 5px;
width: 90%;
}
.item {
white-space: nowrap;
border: 1px solid gray;
width: 100%;
}
.item span {
display: inline-block;
}
.item.active {
background: blue;
}
.item.active:hover {
background: blue;
}
.item.inactive:hover {
background: pink;
}
source to share