Bootstrap Accordion Example

Overview

Web pages are the best place to feature a powerful ideas and also attractive information in quite cheap and easy way and have them obtainable for the whole world to watch and get used to. Will the web content you've provided take viewers's passion and concentration-- this we may never know until you really bring it live upon server. We are able to however presume with a really great opportunity of correcting the impact of some components over the site visitor-- determining either from our own knowledge, the excellent techniques described over the net as well as most commonly-- by the way a page impacts ourselves throughout the time we're offering it a form during the design procedure. Something is sure yet-- great areas of clear text are really feasible to bore the user and also move the viewers away-- so what to produce whenever we simply desire to place this type of much larger amount of content-- for example conditions and terms , commonly asked questions, technological lists of specifications of a goods as well as a customer service which in turn require to be described and exact etc. Well that is simply the things the style process itself narrows down in the end-- obtaining working solutions-- and we ought to find a method working this one out-- presenting the material required in exciting and desirable approach nevertheless it might be 3 webpages plain text extensive.

A great approach is covering the message in to the so called Bootstrap Accordion Example component-- it presents us a highly effective way to provide just the captions of our text message present and clickable on page so normally all content is attainable at all times within a small space-- frequently a single screen so that the site visitor are able to conveniently click on what is necessary and have it enlarged to get familiar with the detailed content. This specific strategy is really in addition intuitive and web design since minimal activities ought to be taken to proceed performing with the page and in such manner we make the visitor advanced-- sort of "push the tab and see the light flashing" thing.

Tips on how to use the Bootstrap Accordion Group:

Accordion example

Expand the default collapse behaviour to generate an Bootstrap Accordion Menu.

<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 possess the best tools for developing an accordion fast and easy utilizing the newly delivered cards elements including just a couple of extra wrapper elements. Listed here is how: To start setting up an accordion we first require an element to wrap the whole thing in-- provide a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( read more here)

Next it's time to make the accordion sections-- add in a

.card

element, in it-- a

.card-header

to make the accordion caption. Within the header-- add an original headline like

h1-- h6

with the

. card-title

class assigned and just within this particular headline wrap an

<a>

element to definitely have the headline of the panel. To control the collapsing panel we are actually about to generate it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

as an example and finally-- to make confident just one accordion feature remains expanded at a time we ought to in addition incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

Yet another 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>

After this is achieved it is undoubtedly time for designing the feature which will certainly stay concealed and carry the current material behind the headline. To work on this we'll wrap a

.card-block

in a

.collapse

element together with an ID attribute-- the similar ID we have to place just as a target for the url in the

.card-title

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

id ="long-text-1"

As soon as this system has been established you have the ability to put either the plain text or else further wrap your material making a bit more complicated system. ( helpful hints)

Improved content

Repeating the training from above you can certainly put in as many elements to your accordion as you want to. Also assuming that you want a material component to showcase developed-- assign the

.in

or possibly

.show

classes to it baseding upon the Bootstrap 4 build edition you are actually dealing with-- up to Alpha 5 the

.in

class goes and within Alpha 6 it becomes removed and replaced by

.show

Final thoughts

So primarily that is actually the way in which you can easily make an totally functioning and quite excellent looking accordion having the Bootstrap 4 framework. Do note it utilizes the card element and cards do spread the whole zone available by default. And so combined together with the Bootstrap's grid column features you can conveniently set up complex wonderful layouts putting the whole thing within an element with defined variety of columns width.