I am using Bootstrap3. I have a accordion component. In that accordion whereever I click the open and close of div happens. But my requirement is the accordion div should open and close only on plus and minus icon click. My code is as follows :
<div data-target="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" class="panel-group accordion1" aria-expanded="true">
<div class="panel panel-default">
<div class="panel-heading active">
<h4 class="panel-title">
<a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">O1-34676844<span class="spanAmtLeft">200</span></a>
</h4>
</div>
<div class="panel-collapse collapse" id="earlierOwner1" aria-expanded="true">
<div class="panel-body inputTable orderSRacccontent">
<!-- payment mode section -->
<div class="row marginTop20">
<div class="col-lg-12 col-md-12">
<ul role="tablist" class="nav nav-tabs" id="paymentMode">
</ul>
</div>
</div>
3
Answers
Remove data-toggle=”collapse” on the parent div and put it into the plus and minus icon
It is unclear what you want done since your source code is insufficient.
With regards to the problem where you want only a plus/minus button to toggle the accordion, do not wrap
.panel-title
in an anchor (<a>
) tag. Instead, wrap it in a<p>
or<h2>
tag. Then in the same class, add an<a>
tag that contains the plus/minus graphic and set that as the trigger.try this