Twitter Bootstrap Question posted in

twitter bootstrap accordion collapse and close only on plus and minus

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

3

Answers


  1. 0

    Remove data-toggle=”collapse” on the parent div and put it into the plus and minus icon

    Login or Signup to reply.
  2. 0

    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.

    <div class="panel-heading active">
       <h4 class="panel-title"> 
              <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">This is where you'll want your icon.</a>
              <p>O1-34676844<span class="spanAmtLeft">200</span></p> 
       </h4>
</div>
    Login or Signup to reply.
  3. 0

    try this 

    $(document).ready(function(){
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<div class="container">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <span class="glyphicon glyphicon-plus"></span>
           <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">O1-34676844<span class="spanAmtLeft">200</span></a>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="row marginTop20">
        <div class="col-lg-12 col-md-12">
            <ul role="tablist" class="nav nav-tabs" id="paymentMode">  
</ul>
      </div>
    </div>
  </div>
  
</div>
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search