CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-accordion
Naphstor
Naphstor

Reputation: 2496

Bootstrap accordion not working.

Hi i am creating a webpage that has bootstrap accordions with plus-minus symbols. The object is to have the first accordion expanded when the page is loaded. And then can be collapsed when any other accordion is clicked. The problem I am facing is that when the other accordion is clicked, the symbol of default expanded accordion doesn't change. That is the accordion collapses, but the symbols remains same. Below is the screen shot of the issue.

Scenario 1: enter image description here

Scenario 2:enter image description here

Below is my html with script: 

<script>
$(document).on('click', '.panel-title', function (e) {
    e.preventDefault();
    var $instance = $(this).find('.temp-plus');

    //var $accordions = $('.panel-title');
    //var $newInst = $(this).find('a');
    //$.each($accordions, function () {
    //    if ($newInst.hasClass('collapsed')) {
    //        $instance.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    //    }
    //});

    if ($instance.hasClass('glyphicon-plus')) {
        $instance.removeClass('glyphicon-plus').addClass('glyphicon-minus');
    } else {
        $instance.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    }
});
</script>

<style type="text/css">

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

    .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.txt-area {
    margin: 10px;
    max-width: 1070px;
}

</style>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <i class="more-less glyphicon glyphicon-minus temp-plus"></i>
                Input Contact Record
            </a>
        </h4>                                
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <h3>
                        Notes
                    </h3>
                    <div class="well well-sm">
                        <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                    </div>
                    <button type="button" class="btn btn-lg">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
    <br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="more-less glyphicon glyphicon-plus temp-plus"></i>
            Contact History
        </a>
    </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <i class="more-less glyphicon glyphicon-plus temp-plus"></i>
            Notes List
        </a>
    </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>

I took the reference from here, it only has plus symbol and doesn't change symbol to minus when clicked on panel heading.

I am new to front end development and thus not sure if I am missing anything in my script or div's. Any help would be great.

Upvotes: 2

Views: 3119

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

I just recreated a combination between g your code as the boot snippet :

And the bellow code works well if i had understood your question

See beloow snippet :

//triggerd on each panel when panel is collapsed and it's annimation is finished
$('.panel-group').on('hidden.bs.collapse', toggleIcon);

//triggerd on each panel when panel is opened and it's annimation is finished
$('.panel-group').on('shown.bs.collapse', toggleIcon);


// function called on both collpase/open for each panel :
function toggleIcon(e) {
  
  var $a = $(e.target).prev(".panel-heading").find("a");
  // this is to prevent change icon on multiple click without firing  collapse/open
  if ($a.hasClass('collapsed')) {
    $a.find("i").removeClass('glyphicon-minus').addClass('glyphicon-plus');
  } else {
    $a.find("i").removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }
}
.panel-group .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: #EEEEEE;
}

.panel-default>.panel-heading {
  padding: 0;
  border-radius: 0;
  color: #212121;
  background-color: #FAFAFA;
  border-color: #EEEEEE;
}

.panel-title {
  font-size: 14px;
}

.panel-title>a {
  display: block;
  padding: 15px;
  text-decoration: none;
}

.more-less {
  float: right;
  color: #212121;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: #EEEEEE;
}

.txt-area {
  margin: 10px;
  max-width: 1070px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />





<div class="container demo">

    
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="more-less glyphicon glyphicon-minus"></i>
                         Input Contact Record
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <div class="row">
                      <div class="col-md-12">
                        <h3>
                          Notes
                        </h3>
                        <div class="well well-sm">
                          <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                        </div>
                        <button type="button" class="btn btn-lg">
                                  Confirm
                              </button>
                      </div>
                  </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Contact History
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    
                        Contact History
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="more-less glyphicon glyphicon-plus"></i>
                        Notes List
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    
                      Notes List
                </div>
            </div>
        </div>

    </div><!-- panel-group -->
    
    
</div><!-- container -->

Upvotes: 2

Rushikumar
Rushikumar

Reputation: 1812

All fixed; Here's the code--

CSS:

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

    .panel-title > a {
        display: block;
        padding: 15px;
        text-decoration: none;
    }

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

.txt-area {
    margin: 10px;
    max-width: 1070px;
}

Javascript:

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="more-less glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="more-less glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

HTML:

<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="#panel1">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="row">
                  <div class="col-md-12">
                      <h3>
                          Notes
                      </h3>
                      <div class="well well-sm">
                          <textarea class="form-control txt-area" rows="5" id="comment" placeholder="Enter Notes..."></textarea>
                      </div>
                      <button type="button" class="btn btn-lg">
                          Confirm
                      </button>
                  </div>
              </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

Working Fiddle here: https://jsfiddle.net/qpdv07vq/

Upvotes: 1

Related Questions