CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Cihan Küsmez
Cihan Küsmez

Reputation: 1965

Full Clickable Accordion in Bootstrap

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 ?

enter image description here

Upvotes: 3

Views: 4294

Answers (2)

Ceylan Mumun Kocabaş
Ceylan Mumun Kocabaş

Reputation: 527

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 :)

Upvotes: 1

Raphael Serota
Raphael Serota

Reputation: 2197

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

Upvotes: 1

Related Questions