Bootstrap Accordion List

Introduction

Web pages are the greatest area to feature a powerful concepts along with amazing information in quite cheap and easy method and have them accessible for the whole world to observe and get used to. Will the content you've provided earn viewers's interest and concentration-- this stuff we can easily certainly never notice till you actually bring it live for web server. We may however suppose with a relatively big opportunity of correcting the impression of some components over the visitor-- determining probably from our personal prior experience, the good methods identified over the web or most commonly-- by the manner a webpage has an effect on ourselves as long as we're delivering it a design during the construction procedure. One point is clear yet-- huge areas of clear text are really potential to bore the client as well as drive the visitor out-- so what to do if we simply just require to place this sort of much bigger amount of message-- for example terms , frequently asked questions, professional lists of specifications of a product or else a support service which ought to be revealed and exact and so forth. Well that's things that the style procedure itself narrows down at the final-- obtaining working treatments-- and we should really discover a solution working this one out-- present the content needed in desirable and fascinating approach nevertheless it could be 3 pages plain text in length.

A cool strategy is wrapping the text message in to the so called Bootstrap Accordion Styles feature-- it offers us a great way to feature just the subtitles of our content clickable and present on page and so commonly the whole web content is obtainable at all times inside a small area-- frequently a single display screen so the site visitor may easily click on what's important and have it widened to get familiar with the detailed material. This approach is certainly as well natural and web style given that small activities have to be taken to go on doing the job with the webpage and so we have the site visitor advanced-- type of "push the button and see the light flashing" stuff.

The way to use the Bootstrap Accordion Group:

Accordion example

Increase the default collapse activity to set up an Bootstrap Accordion Example.

<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>

In Bootstrap 4 we possess the ideal tools for creating an accordion simple and prompt using the recently provided cards elements providing just a few added wrapper features. Listed below is the way: To start building an accordion we primarily need an element in order to wrap the whole thing in-- make a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( more helpful hints)

Next step it's time to establish the accordion panels-- bring in a

.card

element, in it-- a

.card-header

to create the accordion title. In the header-- incorporate an original headline like

h1-- h6

with the

. card-title

class specified and in this headline wrap an

<a>

element to effectively bring the heading of the panel. For you to control the collapsing section we are really about to build it really should have

data-toggle = "collapse"

attribute, its goal should be the ID of the collapsing component we'll build soon just like

data-target = "long-text-1"

as an example and finally-- making certain just one accordion element keeps widened at once we ought to likewise provide a

data-parent

attribute leading to the master wrapper with regard to the accordion in our situation it must be

data-parent = "MyAccordionWrapper"

Another 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>

Right after this is done it is without a doubt moment for making the component that is going to stay concealed and hold up the original information behind the headline. To execute this we'll wrap a

.card-block

within a

.collapse

element along with an ID attribute-- the similar ID we must set like a target for the web link inside the

.card-title

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

id ="long-text-1"

After this system has been made you are able to put either the plain text or further wrap your content generating a little bit more complicated form. ( discover more)

Enhanced content

Repeating the drill from above you are able to put in as many elements to your accordion just as you require to. And also if you want a information component to show expanded-- assign the

.in

.show

classes to it baseding on the Bootstrap 4 build edition you are actually working with-- up to Alpha 5 the

.in

class proceeds and in Alpha 6 it gets replaced by

.show

Final thoughts

So primarily that is definitely ways in which you have the ability to develop an absolutely functioning and quite good looking accordion through the Bootstrap 4 framework. Do note it uses the card feature and cards do spread the whole zone readily available by default. In this way incorporated together with the Bootstrap's grid column features you are able to easily generate complex appealing configurations installing the whole stuff within an element with defined quantity of columns width.