Bootstrap Accordion List

Introduction

Websites are the best area to show a great ideas and also fascinating material in pretty cheap and easy approach and get them provided for the entire world to watch and get familiar with. Will the content you've provided gain customer's passion and concentration-- this we can certainly never find out till you really get it live for web server. We are able to however presume with a really big possibility of correcting the impression of certain components over the visitor-- determining possibly from our unique prior experience, the great strategies described over the internet as well as most generally-- by the approach a page has an effect on ourselves throughout the time we're giving it a shape during the design process. One point is sure yet-- large spaces of plain text are pretty potential to bore the user and also drive the viewers elsewhere-- so just what to perform as soon as we simply desire to set this type of greater amount of text message-- just like conditions , frequently asked questions, practical standards of a goods as well as a support service which in turn ought to be described and exact and so on. Well that's the things the style process itself narrows down at the final-- spotting working treatments-- and we ought to identify a method figuring this one out-- showcasing the content required in exciting and desirable approach nevertheless it could be 3 webpages clear text long.

A great technique is enclosing the text message within the so called Bootstrap Accordion Styles feature-- it gives us a great way to have just the explanations of our content present and clickable on web page and so normally the whole content is easily accessible at all times in a compact area-- usually a single display screen so that the user may easily click on what is necessary and have it developed to get familiar with the detailed content. This specific solution is certainly likewise natural and web design because minimal activities ought to be taken to keep on working with the web page and so we keep the website visitor progressed-- sort of "push the button and see the light flashing" stuff.

How to use the Bootstrap Accordion Group:

Accordion example

Extend the default collapse activity to create 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>

Within Bootstrap 4 we have the perfect instruments for providing an accordion prompt and easy applying the recently presented cards components providing just a few extra wrapper components. Listed here is how: To start making an accordion we initially need an element in order to wrap all thing in-- create a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( additional reading)

Next step it is undoubtedly time to build the accordion sections-- put in a

.card

element, into it-- a

.card-header

to make the accordion caption. In the header-- bring in an actual heading like

h1-- h6

with the

. card-title

class appointed and in this kind of headline wrap an

<a>

element to certainly carry the heading of the panel. To control the collapsing panel we're about to generate it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

for instance and lastly-- making sure only one accordion element stays expanded at once we should likewise provide a

data-parent

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

data-parent = "MyAccordionWrapper"

Yet another 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 undoubtedly the right moment for setting up the element which will definitely stay hidden and keep the actual web content behind the headline. To perform this we'll wrap a

.card-block

in a

.collapse

component with an ID attribute-- the similar ID we should insert just as a goal for the url in the

.card-title

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

id ="long-text-1"

After this format has been produced you can apply either the plain text or additional wrap your material creating a little bit more complicated form. ( read more)

Improved information

Repeating the drill from above you can bring in as many features to your accordion as you need to. Also if you prefer a information feature to present extended-- select the

.in

.show

classes to it according to the Bootstrap 4 build version you're utilizing-- up to Alpha 5 the

.in

class goes and inside of Alpha 6 it becomes substituted by

.show

Final thoughts

So basically that is really the way you can easily set up an fully working and pretty good looking accordion by having the Bootstrap 4 framework. Do note it employs the card element and cards do extend the entire space readily available by default. And so incorporated together with the Bootstrap's grid column opportunities you can quickly set up complex pleasing configurations inserting the whole thing inside an element with defined number of columns width.