Bootstrap Accordion List

Introduction

Web pages are the most excellent area to feature a effective concepts as well as amazing information in simple and really cheap approach and get them available for the entire world to discover and get familiar with. Will the web content you've published earn customer's passion and attention-- this we can never discover before you actually provide it live to web server. We can however suspect with a pretty great opportunity of being right the influence of several features over the site visitor-- valuing perhaps from our individual prior experience, the good strategies defined over the net or else most commonly-- by the way a page impacts ourselves while we're giving it a design during the designing process. Something is sure though-- large zones of plain text are really possible to bore the client plus move the site visitor away-- so just what to do in cases where we simply require to apply this sort of larger amount of content-- for example terms , commonly asked questions, technological standards of a material or a professional service which ought to be detailed and exact and so forth. Well that is really things that the construction procedure itself narrows down at the end-- spotting working treatments-- and we have to find a method working this out-- presenting the web content needed to have in attractive and intriguing manner nevertheless it could be 3 webpages plain text in length.

A cool technique is wrapping the text message in to the so called Bootstrap Accordion Form element-- it offers us a strong way to have just the captions of our text present and clickable on page and so basically the entire web content is readily available at all times in a small area-- usually a single display screen with the purpose that the visitor may conveniently click on what is essential and have it widened in order to get acquainted with the detailed material. This kind of method is certainly additionally instinctive and web style since minimal activities need to be taken to go on operating with the webpage and in this way we keep the site visitor evolved-- kind of "push the button and see the light flashing" stuff.

How you can put into action the Bootstrap Accordion List:

Accordion example

Enhance the default collapse activity to produce an Bootstrap Accordion Table.

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Within Bootstrap 4 we have the excellent tools for designing an accordion very easy and fast using the recently delivered cards elements including just a handful of special wrapper components.Here is the way: To start generating an accordion we primarily need to have an element to wrap the whole item inside-- generate a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( read more)

Next it is undoubtedly the right time to develop the accordion panels-- bring in a

.card

element, in it-- a

.card-header

to make the accordion caption. In the header-- add in an original headline such as

h1-- h6

with the

. card-title

class appointed and inside of this headline wrap an

<a>

element to certainly bring the heading of the panel. In order to control the collapsing section we are really about to create it really should have

data-toggle = "collapse"

attribute, its target needs to be the ID of the collapsing element we'll produce soon like

data-target = "long-text-1"

for example and finally-- making confident only one accordion element stays expanded simultaneously we have to also bring in a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our situation it really should be

data-parent = "MyAccordionWrapper"

One more good example

<!DOCTYPE html>
<title>My Example</title>

<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<style>
body 
padding-top: 1em;
 
</style>
<div class="container-fluid">
    
<div id="faq" role="tablist" aria-multiselectable="true">

<div class="card">
<div class="card-header" role="tab" id="questionOne">
<h5 class="card-title">
<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
What if my boots are too big for my feet?
</a>
</h5>
</div>
<div id="answerOne" class="collapse" role="tabcard" aria-labelledby="questionOne">
<div class="card-block">
Stuff your boots with newspaper or tissue.
</div>
</div>
</div>

<div class="card">
<div class="card-header" role="tab" id="questionTwo">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" aria-expanded="false" aria-controls="answerTwo">
Can I wear my boots inside?
</a>
</h5>
</div>
<div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
<div class="card-block">
No. Your mama should've told you about this.
</div>
</div>
</div>

<div class="card">
<div class="card-header" role="tab" id="questionThree">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerThree" aria-expanded="true" aria-controls="answerThree">
What if my boots get slippery when wet?
</a>
</h5>
</div>
<div id="answerThree" class="collapse in" role="tabcard" aria-labelledby="questionThree">
<div class="card-block">
Keep your boots dry.
</div>
</div>
</div>

</div>

</div>
    
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

<!-- Bootstrap 4 Alpha JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () 
  $('[data-toggle="tooltip"]').tooltip()
)

// Initialize popover component
$(function () 
  $('[data-toggle="popover"]').popover()
)
</script>

As soon as this is completed it's time for setting up the component which in turn will stay hidden and hold the original information behind the heading. To execute this we'll wrap a

.card-block

inside a

.collapse

component together with an ID attribute-- the similar ID we must set as a target for the link inside the

.card-title

from above-- for the example it really should be like

id ="long-text-1"

When this structure has been established you can easily place either the plain text or further wrap your material creating a little bit more complex structure. ( find out more)

Extended information

Repeating the training from above you can surely provide as many components to your accordion as you want to. And in the case that you would like a material element to showcase enlarged-- appoint the

.in

.show

classes to it according to the Bootstrap 4 build version you are actually working with-- up to Alpha 5 the

.in

class proceeds and inside of Alpha 6 it gets removed and replaced by

.show

Final thoughts

So simply speaking that is actually the way in which you have the ability to provide an perfectly functioning and pretty great looking accordion by having the Bootstrap 4 framework. Do note it utilizes the card feature and cards do spread the whole zone available by default. And so merged with the Bootstrap's grid column opportunities you can quickly build complex eye-catching designs inserting the whole stuff inside an element with defined amount of columns width.