CODEWITHSUNDEEP
htmlbootstrap-4
user12251908
user12251908

Reputation:

I want to close other opened panel when one is expanded and other section will be closed

My Bootstrap Accordion

I have a problem with accordion for bootstrap 4. First if I open a collapsed Accrodion it will be opened and when I click on another collapsed accordion,that will also open.

However I want 'when I open the second collapsed accordion then other sections i.e previously opened accordion should close.

Upvotes: 1

Views: 6084

Answers (4)

Abhishek
Abhishek

Reputation: 46

This is working using CSS (plus minus symbol)

<style>
            .card-header:after {
                font-family: 'FontAwesome';  
                content: "\f068";
            }
            .card-header.collapsed:after {
                /* symbol for "collapsed" panels */
                content: "\f067"; 
                display: block;
            }
        </style>

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

this will work:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
              <span class="glyphicon glyphicon-arrow-down"></span></a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
          //your code
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
              <span class="glyphicon glyphicon-arrow-down"></span></a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        //your code
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
              <span class="glyphicon glyphicon-arrow-down"></span></a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
          //your code
      </div>
    </div>
  </div>

</html>

Upvotes: 0

Revti Shah
Revti Shah

Reputation: 642

I have solved accordion with bootstrap 4. Here is the link:

https://jsfiddle.net/58hxoLyu/5/

.accordion .card-header:after {
  font-family: 'FontAwesome';
  content: "\f068";
  float: right;
}

.accordion .card-header.collapsed:after {
  content: "\f067";
}

.accordion {
  margin-bottom: 20px;
}

.custom-repo li {
  display: inline-flex;
  width: 150px;
  position: relative
}

.custom-repo li:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
  top: 7px;
  left: -15px;
}

.annual-repo li {
  width: 200px;
}

.card-header {
  background-color: #a9d3fd;
  border-bottom: 1px solid #bbddff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="accordion-custom">
  <div id="accordion" class="accordion">
    <div class="card mb-0">
      <!-- 1 -->
      <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
        <a class="card-title">
          Corporate Governance
        </a>
      </div>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <ul class="custom-repo">
            <li><a href="#" target="_blank" class="report">June - 2019</a></li>
            <li><a href="#">March - 2019</a></li>
            <li><a href="#" target="_blank" class="report">Dec - 2018</a></li>
          </ul>
        </div>
      </div>
      
       <!-- 2 -->
      <div class="card-header collapsed" data-toggle="collapse" href="#collapseTwo">
        <a class="card-title">
          Corporate
        </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <ul class="custom-repo">
            <li><a href="#" target="_blank" class="report">June - 2019</a></li>
            <li><a href="#">March - 2019</a></li>
            <li><a href="#" target="_blank" class="report">Dec - 2018</a></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 1

Jay Ukani
Jay Ukani

Reputation: 442

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});
body {
  background: #F9F9F9;
}

.myaccordion {
  max-width: 500px;
  margin: 50px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.myaccordion .card,
.myaccordion .card:last-child .card-header {
  border: none;
}

.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}

.myaccordion .fa-stack {
  font-size: 18px;
}

.myaccordion .btn {
  width: 100%;
  font-weight: bold;
  color: #004987;
  padding: 0;
}

.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
  text-decoration: none;
}

.myaccordion li + li {
  margin-top: 10px;
}
<html>

<head>
  <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

  <head>

    <body>
      <div id="accordion" class="myaccordion">
        <div class="card">
          <div class="card-header" id="headingOne">
            <h2 class="mb-0">
              <button class="d-flex align-items-center justify-content-between btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Panel Title
          <span class="fa-stack fa-sm">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fas fa-minus fa-stack-1x fa-inverse"></i>
          </span>
        </button>
            </h2>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              <ul>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
              <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Panel Title
          <span class="fa-stack fa-2x">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
          </span>
        </button>
            </h2>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              <ul>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingThree">
            <h2 class="mb-0">
              <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Panel Title
          <span class="fa-stack fa-2x">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
          </span>
        </button>
            </h2>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
              <ul>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
                <li>Panel Content</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </body>
</html>

Upvotes: 2

Related Questions