Collapse accordion toggle header - increase clickable area

[JacobLett]

If you test the accordion snippet and click on the heading to the far right where there is no anchor text the toggle does not open. I think the clickable area should be as big as possible.

Demo of issue and proposed solution: http://codepen.io/JacobLett/pen/GWqjPw

A CSS solution would be to create a new .collapse-accordion class to apply unique styling to the card header and anchor toggle.

Or with javascript make the .card-header clickable and grab the href inside it if one exists.

What do you think?

[mdo]

Turn the div.card-header into a.card-header and you should get the effect you want. We're also soon to have custom accordion markup when #22138 merges.

[amard33p]

Sorry for reviving an older issue. I am still unable to get this effect in v4.1 after following the examples in https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example. Is there anything I need to add?

[JacobLett]

@amard33p Scroll down and view my after example that follows Mark's suggestion of using an anchor instead of a div.

https://codepen.io/JacobLett/pen/GWqjPw

[amard33p]

@JacobLett But that needs custom CSS right? I mean there's some code in the CSS section in the pen.
Sorry I am pretty green on frontend stuff!

[JacobLett]

@amard33p I forked my example and removed the custom classes. I replaced those with some Bootstrap utility classes. https://codepen.io/JacobLett/pen/VqgwZW

To summarize the changes: Used an anchor tag to add a cursor pointer on hover, but anchors are inline elements so we needed to add a d-block class to make the anchor act like a div and display block.

The red outline shows the clickable area. Let me know if you have more questions.

[amard33p]

Awesome! Thank you very much!