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

Question

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?

Answer 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>