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

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?

CodePudding user response：

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>