Bootstrap Accordion List

Overview

Web pages are the most popular place to feature a effective concepts and appealing content in simple and pretty cheap way and get them attainable for the whole world to observe and get familiar with. Will the material you've shared grab viewers's passion and concentration-- this we can easily never figure out until you really take it live on hosting server. We can however think with a quite big possibility of correcting the effect of certain elements over the visitor-- valuing either from our unique experience, the great practices defined over the web or else most generally-- by the way a page has an effect on ourselves during the time we're providing it a form during the designing process. One point is sure though-- big areas of clear text are really potential to bore the customer and also push the website visitor elsewhere-- so what to produce if we just require to insert this type of much larger amount of content-- such as conditions , commonly asked questions, practical standards of a goods or else a professional service which in turn ought to be described and exact etc. Well that is certainly the things the style process itself narrows down in the end-- spotting working answers-- and we ought to identify a method figuring this one out-- present the content needed to have in desirable and exciting way nevertheless it might be 3 pages clear text in length.

A good solution is covering the content into the so called Bootstrap Accordion Example component-- it delivers us a highly effective way to come with just the explanations of our text clickable and present on page so commonly all material is readily available at all times within a small area-- usually a single display screen so the visitor are able to simply click on what is necessary and have it developed in order to get knowledgeable with the detailed material. This kind of strategy is definitely also intuitive and web design considering that minimal actions have to be taken to keep on operating with the page and in this way we make the site visitor progressed-- somewhat "push the button and see the light flashing" thing.

Steps to work with the Bootstrap Accordion List:

Accordion example

Expand the default collapse behaviour 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>

Inside Bootstrap 4 we have in hand the best instruments for setting up an accordion quick and easy applying the newly offered cards features adding just a few extra wrapper components. Listed below is how: To begin building an accordion we first need an element to wrap all thing in-- create a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( more hints)

Next step it is undoubtedly moment to generate the accordion sections-- provide a

.card

element, into it-- a

.card-header

to form the accordion title. Within the header-- add in an original heading such as

h1-- h6

with the

. card-title

class selected and inside of this headline wrap an

<a>

element to definitely have the headline of the panel. In order to control the collapsing section we are undoubtedly about to generate it really should have

data-toggle = "collapse"

attribute, its target needs to be the ID of the collapsing component we'll set up soon like

data-target = "long-text-1"

for example and finally-- making sure just one accordion element stays extended at once we should really in addition incorporate a

data-parent

attribute leading to the master wrapper for the accordion in our case it must be

data-parent = "MyAccordionWrapper"

One more case

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

When this is completed it is certainly moment for setting up the element that will stay hidden and carry the current web content behind the heading. To execute this we'll wrap a

.card-block

in a

.collapse

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

.card-title

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

id ="long-text-1"

As soon as this format has been generated you can certainly put either the clear text or additional wrap your web content developing a little more complex design. ( discover more)

Enhanced content

Repeating the practice from above you are able to provide as many elements to your accordion just as you want to. And in the case that you desire a web content component to showcase extended-- appoint the

.in

.show

classes to it inning accordance with the Bootstrap 4 build version you are actually using-- up to Alpha 5 the

.in

class proceeds and in Alpha 6 it gets substituted by

.show

Conclusions

So essentially that is definitely ways you are able to make an fully functioning and pretty great looking accordion through the Bootstrap 4 framework. Do note it utilizes the card component and cards do expand the whole space provided by default. In this way mixed together with the Bootstrap's grid column solutions you have the ability to easily build complex appealing arrangements positioning the entire thing within an element with specified amount of columns width.