8

jQueryUI Accordion opens and collapses when the header is clicked: http://jqueryui.com/accordion/

Twitter Bootstrap accordion opens and collapses when the anchor tag inside the header is clicked: http://getbootstrap.com/javascript/#collapse

In my opinion, the jQueryUI header click is easier for the user to understand. The cursor automatically becomes the pointer on the header. Whereas, for the bootstrap accordion, the user does not know the header is clickable until they hover their mouse over the text. I've seen this throw off a few people including myself.

Regardless, I'm interested in knowing what's the difference, and why bootstrap chose anchor click vs. header click. I'm sure their must be some reason.

1
  • By using this, You won't be able to run this on iPhone. (tested) Mar 26, 2017 at 6:11

3 Answers 3

13

This is one of the most common UX issues, you'll see it in many sites with no justification.

Perhaps interestingly, in user testing you'll see people clicking on the (non-clickable) area, then quickly targeting the text - this happens very quickly and people seem completely unfazed, nearly as if they got used to this issue.

There is no sense in how the Bootstrap example handles things - the whole div area should be clickable. But I feel this is more lack of attention from the person who wrote the docs, than anything to do with Bootstrap itself. If you modify the HTML code slightly from this:

<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Collapsible Group Item #1
        </a>
    </h4>
</div>

to this:

<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
    <h4 class="panel-title">
        <a>Collapsible Group Item #1</a>
    </h4>
</div>

you will actually get the same behaviour as JQuery (though you would need to add CSS for the pointer cursor).

3
  • 1
    Man you're the batman of bootstrap! Didn't even know you could use divs as anchors. O_o
    – kiradotee
    Jun 23, 2016 at 15:35
  • 1
    here is another working solution, without any change. hope helps.
    – Shaiju T
    Sep 28, 2016 at 15:06
  • 1
    Using divs as anchors does raise some accessibility concerns -- if you use this technique you should probably at least add ARIA tagging. The answer @stom links to above is probably a better solution. Mar 22, 2017 at 13:58
2

In terms of usability and Fitt's law you are absolutely right, jQueryUI buttons are better, because they're simply bigger. I can't think of one good reason why you should limit clickable area to the text only. I mean, Bootstrap giving the extra clicking area for the carousel arrows, so how is accordion different?

2

Having a bigger clickable area is definitely the BEST UX, and since bootstrap already has this functionality, simply make the link fill the entire div space by making the a tag a block element;

#accordion .panel-title a{
    display:block;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.