Bootstrap accordion example

In this Bootstrap 4 tutorial, we will see Bootstrap 4 Accordions and Collapse. Here we will see various Bootstrap accordion example.

Table of Contents

Bootstrap 4 Collapse Example

Bootstrap 4 Collapse is used when you want to show and hide a large amount of content based on user clicked on the link. When the user clicked on the link or any control the text will visible. And the text will hide when the user again clicked on the control.

In the below example when the user clicked on the button the text will come. If we have again clicked on the button the text will hide.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Collapsible</h2>
  <p>Text will display when we have clicked on button</p>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapseText">Tsinfotechnologies</button>
  <div id="collapseText" class="collapse">
    TSInfo Technologies team has Microsoft MVPs and experienced SharePoint consultants who can leverage SharePoint implementation in your organization to get maximum from SharePoint product. We provide dedicated SharePoint consulting services, that you might looking for to build your intranet. 
  </div>
</div>
</body>
</html>

bootstrap accordion example — bootstrap 4 collapse

Bootstrap 4 Collapse Example

When the user clicked on the first button some text will come. The second button is showing some different text. When the third button is clicked both texts will come.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <h3>Bootstrap 4 multiple collapse</h3>
<p>Click on the button to display the hidden text. When we have clicked on third button both hidden text will display</p> <p>
 <a class="btn btn-success" data-toggle="collapse" href="#Collapsebutton1" role="button" aria-expanded="false" aria-controls="Collapsebutton1">First text will display</a>
 <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#Collapsebutton2" aria-expanded="false" aria-controls="Collapsebutton1">Second text will display</button>
 <button class="btn btn-danger" type="button" data-toggle="collapse" data-target=".multi-collapse-example" aria-expanded="false" aria-controls="Collapsebutton1 Collapsebutton1">Display Both the text</button>
 </p>
 <div class="row">
 <div class="col">
 <div class="multi-collapse-example" id="Collapsebutton1">
 <div class="card card-body">Tsinfo technology is a providing SharePoint training.
 </div></div></div><div class="col">
 <div class="multi-collapse-example" id="Collapsebutton2">
 
      <div class="card card-body">
 
        Tsinfo is also a devlopement company.
 
      </div>
 
    </div>
 
  </div>
 
</div>
 
</div>
</body>
</html>

Bootstrap 4 Basic Accordion Example

When the user clicked on the link the text is coming. When we have again clicked on the link the text will hide.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Bootstrap4 Accordion Example</h2>
  
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <h2 class="mb-0">
                    <button type="button" style=color:red class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><strong>Tsinfotechnology SharePoint Consulting Service</strong></button>									
                </h2>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          TSInfo Technologies team has Microsoft MVPs and experienced SharePoint consultants who can leverage SharePoint implementation in your organization to get maximum from SharePoint product. We provide dedicated SharePoint consulting services, that you might looking for to build your intranet. Our SharePoint consulting team has very good expertise in both SharePoint on-premise (SharePoint/2019/2016/2013/2010/2007), Office 365 SharePoint Online and other related technologies.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <h2 class="mb-0">
                    <button type="button" style=color:red class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo"><strong>Tsinfotechnology Training</strong></button>									
                </h2>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
           TSInfo Technologies provides best SharePoint training in Bangalore, India. Our trainers are Microsoft MVPs and certified consultants having huge experience in SharePoint. They are have worked in various large scale IT companies with roles as Lead, Consultant and Architect. We covers all the topics in SharePoint with latest new features. We provides real time examples, assignment in each and every topic.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <h2 class="mb-0">
                    <button type="button"  style=color:red class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"><strong>Tsinfotechnology About Us</strong></button>									
                </h2>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          TSInfo Technologies is a one the top SharePoint development company in India & start up focusing only on SharePoint, Office 365, Nintex & Microsoft Azure. Started on the year 2018 by two Microsoft MVPs, already have few happy customer around the globe. Our SharePoint expert team understand organization's business requirement and make there workplace to a truly digital workplace with more productive. As a startup, we are committed to give high quality and on time delivery. 
        </div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>

Bootstrap 4 Accordions Image

We will see now how to show and hide, image and text based on the link. When the user clicked on the link the text and image will display.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap 4 Accordion</h3>
<p>Click on the link to see image and text</p>
<div id="bootstrapcollapse" role="tablist">
 <div class="card">
 <div class="card-header" role="tab" id="bootstrapAccordionfirst">
 <h5 class="mb-0">
 <a data-toggle="collapse" href="#bootstrapCollapse1" role="button" aria-expanded="true" aria-controls="bootstrapCollapse1">
 Sea Beach
 </a>
</h5>
 </div>
 <div id="bootstrapCollapse1" class="collapse show" role="tabpanel" aria-labelledby="bootstrapAccordionfirst" data-parent="#bootstrapcollapse">
 <div class="card-body">beautiful Seabeach image</br><img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/img3.jpg" width="200" height="150">
 </div>
 </div>
 </div>
 <div class="card">
 <div class="card-header" role="tab" id="bootstrapAccordionsecond">
 <h5 class="mb-0">
 <a class="collapsed" data-toggle="collapse" href="#bootstrapCollapse2" role="button" aria-expanded="false" aria-controls="bootstrapCollapse2">Hill Station
 </a></h5>
 </div>
 <div id="bootstrapCollapse2" class="collapse" role="tabpanel" aria-labelledby="bootstrapAccordionsecond" data-parent="#bootstrapcollapse">
 <div class="card-body">Hill Station picture
        <br /><img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/Img.jpg" width="200" height="150">
 </div>
 </div>
  </div>
 <div class="card">
 <div class="card-header" role="tab" id="bootstrapAccordionthird">
 <h5 class="mb-0">
 <a class="collapsed" data-toggle="collapse" href="#bootstrapCollapse3" role="button" aria-expanded="false" aria-controls="bootstrapCollapse3">
 Nature Image
        </a></h5>
 </div>
 <div id="bootstrapCollapse3" class="collapse" role="tabpanel" aria-labelledby="bootstrapAccordionthird" data-parent="#bootstrapcollapse">
 <div class="card-body">
 Nature image<br /><img src="https://onlysharepoint2013.sharepoint.com/sites/TSInfoDemos/SiteAssets/img2.jpg" width="200" height="150">
 </div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

Bootstrap 4 Accordions with plus and minus symbol

In the below example I have taken some link with a plus-minus symbol. When the user clicks on the plus symbol text will display and change to minus symbol. Like that when the user clicked on the minus icon the text will hide.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Accordion with Plus Minus Icons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
      
        $(".bootstrap.collapse.show").each(function(){
        	$(this).prev(".bootstrap.Collapse.Header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
        });
        
     
        $(".collapse").on('show.bs.collapse', function(){
        	$(this).prev(".bootstrap.Collapse.Header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function(){
        	$(this).prev(".bootstrap.Collapse.Header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });
</script>
</head>
<body>
<div class="bs-example">
    <div class="accordion" id="bootstrapAccordion">
        <div class="card">
            <div class="bootstrap Collapse Header" id="accordionHeading1">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#AccordioncollapseOne"><i class="fa fa-plus"></i>Tsinfotechnology Consulting Service</button>									
                </h2>
            </div>
            <div id="AccordioncollapseOne" class="collapse" aria-labelledby="accordionHeading1" data-parent="#AccordioncollapseOne">
                <div class="card-body">
                    TSInfo Technologies team has Microsoft MVPs and experienced SharePoint consultants who can leverage SharePoint implementation in your organization to get maximum from SharePoint product. We provide dedicated SharePoint consulting services, that you might looking for to build your intranet. Our SharePoint consulting team has very good expertise in both SharePoint on-premise (SharePoint/2019/2016/2013/2010/2007), Office 365 SharePoint Online and other related technologies.</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="bootstrap Collapse Header" id="accordionHeading2">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#AccordioncollapseTwo"><i class="fa fa-plus"></i>Tsinfotechnology Devlopment Service</button>
                </h2>
            </div>
            <div id="AccordioncollapseTwo" class="bootstrap collapse show" aria-labelledby="accordionHeading2" data-parent="#bootstrapAccordion">
                <div class="card-body">
                    <p>Microsoft SharePoint provides solutions for your business which provides secure, flexible, reliable, anytime, anywhere and any devices available solutions. It will help you to grow your business, increases your team's productivity, better interaction more efficiently, with less downtime and less maintenance. You can pay only to how much you use the cloud service.</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class=" bootstrap Collapse Header" id="haccordionHeading3">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#AccordioncollapseThree"><i class="fa fa-plus"></i> Tsinfo Migration Service</button>                     
                </h2>
            </div>
            <div id="AccordioncollapseThree" class="collapse" aria-labelledby="accordionHeading3" data-parent="#bootstrapAccordion">
                <div class="card-body">
                    The TSInfo Technologies for SharePoint will support you to properly plan, prepare and perform a migration from a legacy Microsoft SharePoint environment to latest version of SharePoint or SharePoint instance to the cloud.
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Bootstrap 4 Accordions Examnple

In the below Bootstrap4 accordion example when the user clicked on the hidden text will going to visible.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
<div class="accordion md-accordion accordion-4" id="bootstrapAccordion" role="tablist" aria-multiselectable="true">
<div class="card"><div class="card-header z-depth-1 teal lighten-4" role="tab" id="AccordionHeading1">
      <a data-toggle="collapse" data-parent="#bootstrapAccordion" href="#bootstraocollapse0" aria-expanded="true"
        aria-controls="bootstraocollapse0">
        <h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
         SharePoint Migration Services
        </h4>
      </a>
    </div>
<div id="bootstraocollapse0" class="collapse show" role="tabpanel" aria-labelledby="AccordionHeading1"
      data-parent="#bootstrapAccordion">
      <div class="card-body rgba-teal-strong white-text">
        <p>The TSInfo Technologies for SharePoint will support you to properly plan, prepare and perform a migration from a legacy Microsoft SharePoint environment to latest version of SharePoint or SharePoint instance to the cloud.</p>
      </div>
    </div>
  </div><div class="card">
<div class="card-header z-depth-1 teal lighten-3" role="tab" id="AccordionHeading2">
      <a class="collapsed" data-toggle="collapse" data-parent="#bootstrapAccordion" href="#bootstraocollapse1"
        aria-expanded="false" aria-controls="bootstraocollapse1">
        <h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
         SharePoint Consulting Service
        </h4>
      </a>
    </div><div id="bootstraocollapse1" class="collapse" role="tabpanel" aria-labelledby="AccordionHeading2"
      data-parent="#bootstrapAccordion">
      <div class="card-body rgba-teal-strong white-text">
        <p>TSInfo Technologies team has Microsoft MVPs and experienced SharePoint consultants who can leverage SharePoint implementation in your organization to get maximum from SharePoint product. We provide dedicated SharePoint consulting services, that you might looking for to build your intranet. Our SharePoint consulting team has very good expertise in both SharePoint on-premise (SharePoint/2019/2016/2013/2010/2007), Office 365 SharePoint Online and other related technologies.</p>
      </div>
    </div>
  </div>
 <div class="card">
<div class="card-header z-depth-1 teal lighten-2" role="tab" id="AccordionHeading3">
      <a class="collapsed" data-toggle="collapse" data-parent="#bootstrapAccordion" href="#bootstraocollapse2"
        aria-expanded="false" aria-controls="bootstraocollapse2">
        <h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
         SharePoint Development Services
        </h4>
      </a>
    </div>
<div id="bootstraocollapse2" class="collapse" role="tabpanel" aria-labelledby="AccordionHeading3"
      data-parent="#bootstrapAccordion">
      <div class="card-body rgba-teal-strong white-text">
        <p>Microsoft SharePoint provides solutions for your business which provides secure, flexible, reliable, anytime, anywhere and any devices available solutions. It will help you to grow your business, increases your team's productivity, better interaction more efficiently, with less downtime and less maintenance. You can pay only to how much you use the cloud service.
</p></div></div></div></div></body>
</html>

You may like following Bootstrap SharePoint tutorials:

Bootstrap 4 Forms Designing and Carousel Example
Bootstrap table
SharePoint Online branding: Creating Accordion Widget or Collapsible panel with Bootstrap
Create Tabbed Menu using Bootstrap and HTML in SharePoint Online/2016/2013
bootstrap’s javascript requires jquery error in SharePoint online

In the above Bootstrap 4 accordion article, we were discussed about collapse and accordion with a different example in bootstrap 4.

Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”