Breaking News: Grepper is joining You.com. Read the official announcement!

Accordion example

Oreoluwa Oloyede answered on July 15, 2022 Popularity 9/10 Helpfulness 3/10

answer Accordion example

related accordion in accordion

Accordion example

Comment

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
    </div>
  </div>
</div>

Popularity 9/10 Helpfulness 3/10 Language css

Source: getbootstrap.com

Tags: accordion css

Link to this answer
Share Copy Link

Contributed on Jul 15 2022

Oreoluwa Oloyede

0 Answers Avg Quality 2/10

Closely Related Answers

accordion in accordion

Comment

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <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="#title1">Title 1</a>
        </h4>
      </div>
      <div id="title1" class="panel-collapse collapse in">
        <div class="panel-body">
        
        
        <div class="panel-group" id="accordion">
        	<div class="panel">
            	<a data-toggle="collapse" href="#title1-1">sub-title</a>
            </div>
            
            <div id="title1-1" class="panel-collapse collapse in">
            	<div class="panel-body">
                	<a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a>
                </div>
            </div>
            
            <div class="panel">
            	<a data-toggle="collapse" href="#title1-2">sub-title 2</a>
            </div>
            
            <div id="title1-2" class="collapse">
            	<div class="panel-body">
                	<a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a>
                </div>
            </div>
        </div>
        
        
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a>
        </h4>
      </div>
      <div id="title2" class="panel-collapse collapse">
        <div class="panel-body">
        
        
        <!--- STUFF --->
        
        
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a>
        </h4>
      </div>
      <div id="title3" class="panel-collapse collapse">
        <div class="panel-body">
        
        <!--- STUFF --->
        
        </div>
      </div>
    </div>
  </div> 
</div>
    
</body>
</html>
 Run code snippetHide results

Popularity 8/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: accordion whatever accordio

Link to this answer
Share Copy Link

Contributed on Jul 11 2023

hasif classit

0 Answers Avg Quality 2/10

Accordion example

Contents

More Related Answers

Accordion example

Closely Related Answers

accordion in accordion

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.