Full Clickable Accordion in Bootstrap

Question

I created a payment page for mobile in php with bootstrap. If visitor click the text the panel is expanding. But if visitor clicks nearby text the panel is not expanding. This is not useful.

How can we transform collapsed panel to full clickable ?

Answer 1

You can manually toggle the accordion with $('#myAccordion').collapse('toggle')

Just set an event handler to watch for clicks on whatever area you want to be clickable, and then toggle the accordion.

For reference: http://getbootstrap.com/javascript/#collapse

Answer 2

You will need to put the "href" attribute on the div element with class "panel-heading", also put there the "data-toggle" attribute. Like This:

<div class="panel-heading invisible" data-toggle="collapse" href="#collapseOne">
        <h1 class="panel-title">
            Title
        </h1>
    </div>
<div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
    </div>
</div>

Hope That Helps, dont forget to put the same ID to the "panel-collapse" element that holds the "panel-body". Good Luck :)