Bootstrap Accordion List

Introduction

Website pages are the best field to display a impressive concepts and appealing content in pretty cheap and simple way and get them obtainable for the entire world to observe and get familiar with. Will the content you've provided score reader's passion and concentration-- this we may certainly never figure out until you actually deliver it live upon hosting server. We are able to however guess with a quite serious chance of correcting the impact of various components over the visitor-- valuing either from our individual prior experience, the great strategies identified over the internet as well as most typically-- by the approach a web page influences ourselves as long as we're providing it a design during the development procedure. One thing is sure yet-- large fields of plain text are really probable to bore the site visitor plus push the visitor away-- so what to try if we simply just wish to apply this sort of much bigger amount of text-- like terms and conditions , commonly asked questions, special standards of a product or else a customer service which in turn require to be summarized and exact and so on. Well that is definitely the things the style process in itself narrows down in the end-- obtaining working methods-- and we ought to uncover a solution working this out-- present the material needed in desirable and intriguing approach nevertheless it might be 3 web pages clear text long.

A cool solution is cloaking the text message in to the so called Bootstrap Accordion Group component-- it provides us a powerful way to come with just the explanations of our text clickable and present on webpage so normally all content is accessible at all times within a small space-- usually a single screen with the purpose that the visitor may easily click on what's important and have it developed to get familiar with the detailed material. This kind of approach is definitely as well instinctive and web format due to the fact that small acts need to be taken to go on operating with the web page and so we keep the site visitor evolved-- somewhat "push the button and see the light flashing" stuff.

Steps to utilize the Bootstrap Accordion List:

Accordion example

Stretch the default collapse behaviour to make an Bootstrap Accordion Styles.

<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 in hand the best devices for designing an accordion prompt and easy using the newly offered cards features incorporating just a handful of additional wrapper features. Listed below is the way: To start making an accordion we primarily really need an element to wrap all thing in-- create a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( recommended reading)

Next step it is without a doubt point to create the accordion panels-- include a

.card

element, in it-- a

.card-header

to make the accordion title. In the header-- incorporate an original headline such as

h1-- h6

with the

. card-title

class selected and within this specific headline wrap an

<a>

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

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing element we'll create in a minute just like

data-target = "long-text-1"

for example and finally-- making certain just one accordion component keeps widened simultaneously we need to also bring in a

data-parent

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

data-parent = "MyAccordionWrapper"

A different 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 definitely time for making the component that will stay hidden and maintain the current information behind the heading. To perform this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the very same ID we have to install just as a goal for the url within the

.card-title

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

id ="long-text-1"

As soon as this format has been produced you have the ability to apply either the clear text or else extra wrap your content developing a little bit more complicated design. ( learn more here)

Expanded web content

Repeating the training from above you can certainly add as many components to your accordion just as you need to. And also if you prefer a material feature to display expanded-- select the

.in

or possibly

.show

classes to it baseding upon the Bootstrap 4 build version you are actually using-- up to Alpha 5 the

.in

class goes and within Alpha 6 it becomes changed by

.show

Final thoughts

So basically that is certainly how you have the ability to develop an completely functioning and pretty excellent looking accordion through the Bootstrap 4 framework. Do note it employs the card element and cards do extend the whole space accessible by default. And so integrated along with the Bootstrap's grid column opportunities you may quickly generate complex eye-catching configurations putting the entire thing within an element with specified quantity of columns width.