Bootstrap Accordion List

Intro

Website pages are the most popular place to present a impressive ideas and also attractive web content in easy and relatively cheap way and get them obtainable for the entire world to see and get used to. Will the content you've shared take client's passion and attention-- this stuff we can never ever know until you actually bring it live on server. We are able to however suppose with a pretty big chance of correcting the impact of some elements over the visitor-- determining perhaps from our individual prior experience, the excellent methods described over the internet or most generally-- by the manner a web page influences ourselves while we're giving it a design during the development process. One point is sure though-- huge spaces of clear text are pretty possible to bore the customer and drive the website visitor away-- so what exactly to do if we simply just desire to put this sort of much bigger amount of message-- for example conditions and terms , frequently asked questions, practical lists of specifications of a product or a professional service which need to be uncovered and exact and so forth. Well that is really what the design process in itself narrows down at the end-- getting working answers-- and we should really identify a method working this one out-- display the web content required in good looking and interesting way nevertheless it might be 3 web pages clear text long.

A good method is covering the text message into the so called Bootstrap Accordion Form element-- it supplies us a great way to come with just the captions of our message present and clickable on web page so normally all material is readily available at all times in a compact space-- frequently a single display so that the customer are able to quickly click on what is necessary and have it widened in order to get knowledgeable with the detailed information. This kind of strategy is additionally natural and web design considering that small acts ought to be taken to proceed functioning with the page and in such manner we keep the site visitor progressed-- kind of "push the tab and see the light flashing" thing.

The best way to make use of the Bootstrap Accordion Table:

Accordion example

Extend the default collapse behavior to design 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 obtain the great devices for making an accordion easy and fast utilizing the newly presented cards elements adding just a couple of special wrapper features. Listed below is the way: To begin developing an accordion we primarily need an element to wrap the whole thing within-- set up a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( read here)

Next it is undoubtedly time to set up the accordion panels-- include a

.card

element, inside it-- a

.card-header

to form the accordion title. Inside the header-- bring in an actual headline such as

h1-- h6

with the

. card-title

class specified and in this particular heading wrap an

<a>

element to actually carry the headline of the section. To control the collapsing panel we are undoubtedly about to make it really should have

data-toggle = "collapse"

attribute, its goal must be the ID of the collapsing feature we'll create soon just like

data-target = "long-text-1"

for example and at last-- making certain only one accordion feature remains expanded at once we have to in addition provide a

data-parent

attribute indicating the master wrapper for the accordion in our example it really should be

data-parent = "MyAccordionWrapper"

Another scenario

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

Once this is done it is without a doubt moment for setting up the feature that will definitely stay concealed and keep the original material behind the headline. To carry out this we'll wrap a

.card-block

in a

.collapse

component together with an ID attribute-- the identical ID we must apply as a goal for the url in the

.card-title

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

id ="long-text-1"

When this system has been created you have the ability to apply either the plain text or further wrap your web content creating a bit more complex form. ( useful content)

Expanded material

Repeating the practice from above you can certainly add as many elements to your accordion as you require to. Also if you prefer a material element to present enlarged-- appoint the

.in

or possibly

.show

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

.in

class proceeds and inside of Alpha 6 it becomes changed by

.show

Final thoughts

So primarily that is definitely ways in which you are able to build an perfectly functioning and quite good looking accordion utilizing the Bootstrap 4 framework. Do note it uses the card feature and cards do expand the whole zone available by default. And so combined together with the Bootstrap's grid column possibilities you may conveniently set up complex wonderful formats placing the entire thing within an element with specified variety of columns width.