Bootstrap & Angular - Accordion toggle not on heading

I have a basic Bootstrap accordion in my Angular App.

By default, the accordion gets triggered by the 'heading'. I want to be able to trigger the accordion for an 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 fine (in a way), but it doesn't give me the result I'm looking for.

In my application, people will be able to select the item by clicking on the heading, while clicking on the 'trigger' will display the children of that specific item (and not select it).

If I leave the code like it is, the item is selected once I click the accordion trigger (which is an expected result I guess).

I'm looking for a solution to make the item selectable while keeping the accordion (which won't select the item). I've tried using event.stopPropagation, but while it stops the item from being selectable using the trigger, the accordion doesn't work anymore.

Plunkr: http://plnkr.co/edit/GyuYP1sT6JWaZdLcTCS4?p=preview

Any ideas?

Answers:

Answer

Plunker

Moved the chevron out of the "selecting area", and created a "title-bar" span that highlights pink on hover and blue on click without changing color of chevron arrow.

The chevron arrow only affects the accordian, while the title-bar only affects highlight and selection.

That is my interpretation of what you want. LMK if I am off.

    <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 span child turn pink on hover and blue on click

.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;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.