Bootstrap Accordion List

Introduction

Web pages are the finest field to showcase a effective ideas and amazing material in quite cheap and easy manner and have them available for the whole world to check out and get used to. Will the web content you've offered receive customer's passion and attention-- this we can easily never figure out until you actually provide it live to server. We have the ability to however guess with a pretty serious opportunity of correcting the influence of certain elements over the website visitor-- determining possibly from our unique prior experience, the good methods defined over the web as well as most commonly-- by the approach a webpage impacts ourselves in the time we're giving it a shape during the creation process. One point is certain yet-- large areas of clear text are really feasible to bore the customer plus drive the website visitor elsewhere-- so just what to operate as soon as we simply wish to place this sort of greater amount of content-- like conditions , commonly asked questions, tech options of a product line or else a service which have to be detailed and exact and so forth. Well that's what the style procedure in itself narrows down at the final-- getting working options-- and we ought to find a solution figuring this out-- feature the web content needed to have in desirable and intriguing approach nevertheless it might be 3 pages plain text in length.

A good method is cloaking the message into the so called Bootstrap Accordion List component-- it supplies us a great way to obtain just the captions of our content clickable and present on web page and so commonly the entire information is easily accessible at all times inside a small space-- frequently a single screen with the purpose that the user are able to simply click on what is essential and have it enlarged to become familiar with the detailed content. This specific strategy is really likewise intuitive and web format since minimal actions ought to be taken to proceed doing the job with the webpage and so we keep the site visitor progressed-- kind of "push the switch and see the light flashing" stuff.

The ways to work with the Bootstrap Accordion List:

Accordion example

Increase the default collapse activity to develop 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>

Inside Bootstrap 4 we have the perfect instruments for creating an accordion convenient and fast utilizing the newly delivered cards features incorporating just a few additional wrapper elements. Listed here is the way: To begin producing an accordion we primarily require an element to wrap the whole item into-- set up a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( learn more)

Next it is without a doubt moment to generate the accordion sections-- incorporate a

.card

element, into it-- a

.card-header

to make the accordion headline. In the header-- add an actual heading such as

h1-- h6

with the

. card-title

class specified and just within this specific heading wrap an

<a>

element to certainly bring the heading of the panel. For you to control the collapsing panel we are certainly about to generate it really should have

data-toggle = "collapse"

attribute, its aim should be the ID of the collapsing element we'll establish soon just like

data-target = "long-text-1"

for example and finally-- to make certain just one accordion feature continues to be widened simultaneously we ought to at the same time bring in a

data-parent

attribute leading to the master wrapper with regard to the accordion in our example it should be

data-parent = "MyAccordionWrapper"

An additional situation

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

Whenever this is accomplished it is undoubtedly time for generating the component which in turn will stay concealed and hold up the original content behind the headline. To perform this we'll wrap a

.card-block

in a

.collapse

element with an ID attribute-- the very same ID we must apply as a target for the url inside the

.card-title

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

id ="long-text-1"

As soon as this design has been created you are able to insert either the plain text or else extra wrap your content developing a little bit more complicated form. ( more helpful hints)

Extended content

Repeating the practice from above you are able to add as many elements to your accordion as you need to. And also if you want a web content feature to show expanded-- specify the

.in

or possibly

.show

classes to it inning accordance with the Bootstrap 4 build edition you're working with-- up to Alpha 5 the

.in

class proceeds and in Alpha 6 it gets removed and replaced by

.show

Final thoughts

So generally that is certainly how you are able to provide an fully functioning and very good looking accordion by using the Bootstrap 4 framework. Do note it employs the card feature and cards do extend the entire zone available by default. And so merged along with the Bootstrap's grid column solutions you may easily build complex appealing formats inserting the entire stuff inside an element with specified number of columns width.