Bootstrap Accordion Styles

Intro

Web pages are the most popular area to show a amazing concepts and fascinating content in relatively cheap and simple approach and have them accessible for the entire world to watch and get familiar with. Will the content you've shared get reader's interest and attention-- this stuff we may never notice till you really bring it live upon server. We can however think with a very big chance of being right the efficiency of several components over the site visitor-- judging probably from our unique prior experience, the excellent strategies identified over the internet or else most typically-- by the way a page affects ourselves in the time we're providing it a design during the development process. One thing is sure though-- big spaces of plain text are really possible to bore the user as well as move the website visitor elsewhere-- so what exactly to perform in cases where we simply need to insert this type of much larger amount of text message-- like terms and conditions , frequently asked questions, practical options of a product line as well as a support service which in turn have to be specified and exact and so on. Well that is certainly things that the design process itself narrows down in the end-- getting working methods-- and we should really discover a solution figuring this one out-- feature the content needed to have in interesting and attractive way nevertheless it could be 3 webpages plain text prolonged.

A cool strategy is covering the message into the so called Bootstrap Accordion Table element-- it presents us a strong way to get just the explanations of our text message present and clickable on webpage and so basically all information is accessible at all times in a compact space-- often a single display with the purpose that the visitor may simply click on what is essential and have it enlarged in order to get familiar with the detailed web content. This specific solution is definitely also natural and web design considering that small activities have to be taken to keep on operating with the page and in such manner we keep the visitor evolved-- kind of "push the button and see the light flashing" thing.

Exactly how to apply the Bootstrap Accordion Example:

Accordion example

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

In Bootstrap 4 we possess the excellent tools for developing an accordion quick and very easy utilizing the newly presented cards elements including just a few additional wrapper elements. Listed here is the way: To start setting up an accordion we first need to have an element to wrap the entire item within-- generate a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( learn more here)

Next it is without a doubt the right time to develop the accordion sections-- put in a

.card

element, into it-- a

.card-header

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

h1-- h6

with the

. card-title

class specified and in this headline wrap an

<a>

element to actually bring the headline of the panel. In order to control the collapsing panel we are certainly about to generate it really should have

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing component we'll establish soon similar to

data-target = "long-text-1"

for instance and at last-- making certain just one accordion feature keeps extended at once we should really additionally bring in a

data-parent

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

data-parent = "MyAccordionWrapper"

Some other 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>

After this is achieved it is definitely time for making the feature that will certainly stay hidden and carry the current web content behind the headline. To execute this we'll wrap a

.card-block

inside a

.collapse

element along with an ID attribute-- the very same ID we have to insert like a goal 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 system has been made you have the ability to set either the plain text or else extra wrap your content developing a little more complicated design. ( useful reference)

Enhanced web content

Repeating the training from above you are able to provide as many elements to your accordion just as you need to. Also supposing that you prefer a material element to showcase enlarged-- specify the

.in

.show

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

.in

class goes and in Alpha 6 it gets replaced by

.show

Conclusions

So primarily that is definitely the way in which you are able to provide an completely working and very excellent looking accordion using the Bootstrap 4 framework. Do note it employs the card component and cards do spread the whole space provided by default. In this way incorporated along with the Bootstrap's grid column methods you have the ability to easily make complex wonderful formats setting the entire stuff within an element with defined quantity of columns width.