Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding Collapsible Content to your Website

Adding collapsible content to your website provides interactivity while allowing you to add more content to your website.

Adding collapsible content to your website provides a more interactive user experience (UX) while also allowing you to add more content to your website. Using Bootstrap, we will show you how to easily add collapsible content to your website and in this case of this example, build an FAQ page for your website.

Below is the HTML, CSS, and JavaScript to add a page with collapsible content to your website.

Step 1 - Add the HTML below where you'd like to add your collapsible content

<div class="faqs-items">
  <div class="container small-container">
    <div id="faq">
      <section class="accordion-section">
        <div class="row">
          <div class="col-md-4 accordion-item">
            <h2 class="accordion-section-header">Support</h2>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14343" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14343" class="faq-toggle collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14343" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14343" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14343" role="button">What are the benefits of WebCorpCo?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14343" class="panel-collapse collapse" id="collapse-panel14343" role="tabpanel" aria-expanded="false" style="height: 0px;">
                  <div class="panel-body">
                    <p></p>
                    <p>With WebCorpCo, you and your visitors will benefit from a finely-tuned technology stack that drives the highest levels of site performance, speed and engagement - and contributes more to your bottom line.</p>
                    <p></p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14303" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14303" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14303" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14303" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14303" role="button">Where can I go to get support?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14303" class="panel-collapse collapse" id="collapse-panel14303" role="tabpanel">
                  <div class="panel-body sumome-article" style="position: relative;">
                    <p></p>
                    <p>Head on over to <a href="">webcorpco.com</a> for all of your support needs.</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14342" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14342" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14342" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14342" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14342" role="button">How easy is WebCorpCo?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14342" class="panel-collapse collapse" id="collapse-panel14342" role="tabpanel">
                  <div class="panel-body">
                    <p>Building a website is extremely easy. With a working knowledge of HTML and CSS you will be able to have a site up and running in no time.</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14314" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14314" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14314" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14314" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14314" role="button">Does WebCorpCo offer any training?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14314" class="panel-collapse collapse" id="collapse-panel14314" role="tabpanel">
                  <div class="panel-body">
                    <p>Yes, we have how to guides in our Support section and we also offer personal training via our support plan. If you are interested in 1 on 1 training options, just fill out our contact form and we will be glad to speak with you.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 accordion-item">
            <h2 class="accordion-section-header">Billing</h2>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14327" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14327" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14327" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14327" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14327" role="button">How much does WebCorpCo cost?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14327" class="panel-collapse collapse" id="collapse-panel14327" role="tabpanel">
                  <div class="panel-body">
                    <p>Pricing for WebCorpCo is based on your needs please check out webcorpco.com to find out how much it would cost.</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14328" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14328" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14328" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14328" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14328" role="button">How do I edit my billing information?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14328" class="panel-collapse collapse" id="collapse-panel14328" role="tabpanel">
                  <div class="panel-body">
                    <p>In order to edit your billing information you will have to login to your account at webcorpco.com and go to “Billing Information” from there you can edit your billing information.</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14330" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14330" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14330" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14330" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14330" role="button">Can I do annual billing?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14330" class="panel-collapse collapse" id="collapse-panel14330" role="tabpanel">
                  <div class="panel-body">
                    <p>Yes, annual billing is available.</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14301" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14301" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14301" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14301" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14301" role="button">Will my data be private and secure?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14301" class="panel-collapse collapse" id="collapse-panel14301" role="tabpanel">
                  <div class="panel-body">
                    <p>Yes, security is integral to the WebCorpCo Platform and is embedded into every architectural layer.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 accordion-item">
            <h2 class="accordion-section-header">Infrastructure</h2>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14341" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14341" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14341" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14341" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14341" role="button">What is the uptime for WebCorpCo?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14341" class="panel-collapse collapse" id="collapse-panel14341" role="tabpanel">
                  <div class="panel-body">
                    <p>Using Amazon AWS technology which is an industry leader for reliability you will be able to experience an uptime in the vicinity of 99.95%</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14305" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14305" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14305" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14305" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14305" role="button">What technology do we use?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14305" class="panel-collapse collapse" id="collapse-panel14305" role="tabpanel">
                  <div class="panel-body">
                    <p>WebCorpCo is built using PHP, Javascript, HTML and CSS</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14319" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14319" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14319" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14319" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14319" role="button">What browsers do we support?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14319" class="panel-collapse collapse" id="collapse-panel14319" role="tabpanel">
                  <div class="panel-body">
                    <p>We support the current and previous major releases of Google Chrome™, Firefox®, Safari®, Microsoft® Edge™, and Internet Explorer® on a rolling basis. Each time a new version is released, we begin supporting that version and stop supporting the third most recent version</p>
                  </div>
                </div>
              </div>
            </div>
            <div aria-multiselectable="true" class="panel-group" role="tablist">
              <div class="panel section">
                <div class="panel-heading row" id="header-panel14307" role="tab">
                  <div class="col-sm-12">
                    <h4 class="panel-title"><a aria-controls="collapse-panel14307" class="collapsed faq-toggle" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14307" role="button"><i class="fa fa-angle-down caret-faq">&nbsp;</i></a><a aria-controls="collapse-panel14307" class="collapsed" data-toggle="collapse" aria-expanded="false" data-parent="#accordion1" href="#collapse-panel14307" role="button">Will WebCorpCo scale with my website?</a></h4>
                  </div>
                </div>
                <div aria-labelledby="header-panel14307" class="panel-collapse collapse" id="collapse-panel14307" role="tabpanel">
                  <div class="panel-body">
                    <p>Yes, since WebCorpCo is entirely cloud based, new servers can easily be added or upgraded to increased memory to handle your growing company’s digital demands.</p>
                  </div>
                </div>
              </div>
            </div>
         </div>
        </div>
      </section>
    </div>
  </div>
</div>

Step 2 - Add the CSS to the main stylesheet of your website

#faq {
  margin-top: 20px;
}
.accordion-item {
  padding: 0 30px;
}
.accordion-section h2 {
  font-size: 24px;
  color: #1c81ac;
  margin-bottom: 14px;
  text-transform: capitalize;
  margin-top: 0;
  letter-spacing: 0;
}
section h2 {
  font-weight: 600;
  letter-spacing: 0.5px;
}
.panel-group {
  margin-bottom: 0;
}
.accordion-section .panel-heading {
  background-color: #ebebeb;
  color: #323b40;
  padding: 10px 0 12px;
}
.accordion-section h4.panel-title {
  padding: 0 10px;
  margin-bottom: 5px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing: 0;
  font-weight: 400;
}
#faq .collapsed {
  display: table;
  line-height: 22px;
}
#faq .faq-toggle {
  float: left;
}
section.faq .fa:before {
  font-size: 20px;
  padding-right: 8px;
}
.panel-group .panel-heading+.panel-collapse>.list-group, .pricing-plans-wrapper .panel-group .panel-heading+.panel-collapse>.panel-body {
  border-top: none;
}
section.faq .panel-body p {
  text-align: left;
  font-size: 16px;
}
p, 
.ul li {
  color: #5b666d;
}
ol, 
ul {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Step 3 - Add the includes below to the web page where your content will live

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev