仅在单击正确的符号时打开手风琴

Question

I would like to disable the click event that opens the accordion if I click anywhere on the heading.Instead I would like to click only on the right most symbol.... Here it's opening if I click on the Save button..

  <accordion-group is-open="status.open" template-url="accordion-group.html">
        <accordion-heading>
            I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>

Here's the plunker..

link

Answer 1

in your html file i modified:

  <accordion close-others="oneAtATime">
    <accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html">
        <accordion-heading style="pointer-events:none !important;">
            I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
  </accordion>

You should add css property: "pointer-events: none !important" on elements which you won't to react on mouse click event, and set "pointer-events: auto !important" on your icon indicator only. The accordion should be opened only when you click on the arrow icon. That should work :)

To make your solution more elegant you can make CSS classes like:

.disable-click-event {
    pointer-events: none !important;
}

.enable-click-event {
    pointer-events: auto !important;
}

There's also an option that prevents event bubbling ($event.stopPropagation()) but in this case i dont know where exactly event is invoked so it needs hard investigation to find it out.

One more hint: if any problem can be solve with CSS instead of JS it's completly worth to do it :) JavaScript events are not so easy to debug, so CSS fix will be much faster to find than dirty bug with event bubbling. I can recommend you to use simple CSS solutions with a clear conscience :) cheers