CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Dev java
Dev java

Reputation: 111

Bootstrap collapse panel closed by default

I use a bootstrap panel and i added a span clickable icon : plus when panel body is open and minus when panel body is close, my problem now is how can i do to set it close by default(plus icon showed by default and when i click on it panel body will be opening)

above my code to do this, thanks in advance for your help.

<html>

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).on('click', '.panel-heading span.clickable', function (e) {
    var $this = $(this);
    if (!$this.hasClass('panel-collapsed')) {

        $this.parents('.panel').find('.panel-body').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    } else {
    console.log($this);

        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }
});
</script>
<style>

.clickable
{
    cursor: pointer;
}

.clickable .glyphicon
{
    background: rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px
}

.panel-heading span
{
    margin-top: -23px;
    font-size: 15px;
    margin-right: -9px;
}
</style>
</head>
 <body>
 <div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1</h3>
                    <span class="pull-right clickable panel-collapsed in"><i class="glyphicon glyphicon-plus"></i></span>
                </div>
                <div class="panel-body">
                    Panel content</div>
            </div>
        </div>

        </div>
    </div>
 </body>

</html>

Upvotes: 5

Views: 19904

Answers (4)

Kiran Tirumalasetti
Kiran Tirumalasetti

Reputation: 114

Remove the class show for the div

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">

to

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">

Upvotes: 1

Denis Thomas
Denis Thomas

Reputation: 1022

You could use the Bootstrap collapse component which already has most of the logic you need: 

<div class="panel-heading">
   <h3 class="panel-title">Panel 1</h3>
   <button class="btn btn-primary pull-right" type="button"
           data-toggle="collapse" data-target="#collapseExample">
      <i class="glyphicon glyphicon-plus"></i>
    </button>
</div>
<div class="collapse" id="collapseExample">
    <div class="panel-body">Panel content</div>
</div>

In addition you only need a small JavaScript to change the button icon:

    $(document).on('click', '.panel-heading button', function(e) {
      var $this = $(this);
      var icon = $this.find('i');
      if (icon.hasClass('glyphicon-plus')) {
        $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
      } else {
        $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
      }
    });

Working example:

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
    $(document).on('click', '.panel-heading button', function(e) {
      var $this = $(this);
      var icon = $this.find('i');
      if (icon.hasClass('glyphicon-plus')) {
        $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
      } else {
        $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
      }
    });
  </script>
  <style>
    .clickable {
      cursor: pointer;
    }
    .clickable .glyphicon {
      background: rgba(0, 0, 0, 0.15);
      display: inline-block;
      padding: 6px 12px;
      border-radius: 4px
    }
    .panel-heading span {
      margin-top: -23px;
      font-size: 15px;
      margin-right: -9px;
    }
    .panel-heading button  {
      margin-top: -25px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">
                        Panel 1</h3>
            <button class="btn btn-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
              <i class="glyphicon glyphicon-plus"></i>
            </button>
          </div>
          <div class="collapse" id="collapseExample">
            <div class="panel-body">
              Panel content</div>
          </div>
        </div>

      </div>

    </div>
  </div>
</body>

</html>

Upvotes: 3

Ankur Mahajan
Ankur Mahajan

Reputation: 3596

I am sharing a reference code for you, just follow the code, there is no need of any click function, bootstrap 'data-toggle="collapse"' handles it automatically.

CODE:

            <div class="panel-group" id="steps">
                <!-- Step 1 -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#steps" href="#stepOne"><SPAN TAG></a>
                        </h4>
                    </div>
                    <div id="stepOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Sub-Category Name</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Just put the span tag in place of and use class pull-right, the bootstrap icon which one you need http://getbootstrap.com/components/

I hope this will work.

Upvotes: 0

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

You just need to change this:

<div class="panel-body">

To this :

<div class="panel-body"  style="display:none;">

And change the slideUp() by slideDown(), and the same for slideDown() by slideUp().

Also change this:

<span class="pull-right clickable collapse in"><i class="glyphicon glyphicon-plus"></i></span>

To this: 

<span class="pull-right clickable collapse in"><i class="glyphicon glyphicon-minus"></i></span>

Everything should work as you mentioned in your question now.

Here's a JSFiddle link : Try It

Upvotes: 6

Related Questions