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) – Zaib Azhar Rao Mar 26 '17 at 6:11
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 '16 at 15:35
  • 1
    here is another working solution, without any change. hope helps. – Shaiju T Sep 28 '16 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. – Daniel Beck Mar 22 '17 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, privacy policy and cookie policy

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