How do you make a link_to text clickable to activate a Boostrap collapsible?

I have this code for a collapsible header text and a caret besides it which collapses/uncollapses a div .

<span><strong>"Weekly"</strong></span> <a class="caret" type="button" data-toggle="collapse" data-target="#weekly" aria-expanded="false" aria-controls="weekly"></a>

<div class="collapse overflow-hidden" id="weekly">
  # Collapsible content
</div>

I want to make the header text next to the caret clickable too, to give the user a larger area to click on that will collapse/uncollapse the corresponding div.

I’ve tried wrapping the span and a tags inside a link_to with unsatisfying results (the text links to the anchor that represents the id of the div to be uncollapsed).

What would be the correct way to accomplish this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can make it clickable if you put everything in a button in the top container.

Example :

<a class="caret" type="button" data-toggle="collapse" data-target="#weekly" aria-expanded="false" aria-controls="weekly">
    <span><strong>"Weekly"</strong></span> 
</a>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0