Bootstrap Accordion Group

Intro

Websites are the best area to showcase a highly effective concepts and amazing content in quite cheap and easy manner and get them available for the entire world to see and get familiar with. Will the content you've provided receive viewers's interest and concentration-- this we can never discover till you really deliver it live for server. We are able to however guess with a really great probability of correcting the effect of various features over the site visitor-- reviewing possibly from our individual knowledge, the great strategies defined over the internet or most typically-- by the approach a webpage has an effect on ourselves throughout the time we're offering it a good shape during the designing process. One thing is sure though-- large fields of plain text are very potential to bore the site visitor and push the viewers elsewhere-- so what exactly to do as soon as we just desire to put this type of much bigger amount of message-- such as conditions and terms , commonly asked questions, technological lists of specifications of a product line or else a professional services which require to be described and exact and so forth. Well that is definitely what the creation procedure in itself narrows down in the end-- obtaining working methods-- and we ought to identify a solution figuring this out-- showcasing the content needed in helpful and wonderful manner nevertheless it could be 3 web pages clear text long.

A marvelous method is covering the content within the so called Bootstrap Accordion Styles element-- it delivers us a powerful way to provide just the subtitles of our text message present and clickable on web page and so typically the whole material is available at all times within a small space-- frequently a single display with the purpose that the site visitor may conveniently click on what is essential and have it enlarged to become knowledgeable with the detailed material. This strategy is in addition instinctive and web format due to the fact that small actions ought to be taken to continue doing the job with the webpage and so we keep the visitor progressed-- type of "push the switch and see the light flashing" stuff.

The way to put into action the Bootstrap Accordion Group:

Accordion example

Increase the default collapse behavior to make 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>

In Bootstrap 4 we receive the great tools for developing an accordion prompt and convenient employing the recently provided cards elements adding just a couple of additional wrapper features.Here is the way: To begin setting up an accordion we primarily need to have an element in order to wrap the whole thing inside-- make a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( useful content)

Next step it is without a doubt about time to build the accordion sections-- add a

.card

element, in it-- a

.card-header

to create the accordion caption. Inside the header-- bring in an actual headline such as

h1-- h6

with the

. card-title

class selected and just within this particular headline wrap an

<a>

element to definitely have the headline of the section. If you want to control the collapsing panel we are definitely about to build it should have

data-toggle = "collapse"

attribute, its goal should be the ID of the collapsing element we'll set up soon just like

data-target = "long-text-1"

for instance and lastly-- to make certain only one accordion feature remains widened at once we need to also provide a

data-parent

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

data-parent = "MyAccordionWrapper"

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

As soon as this is completed it's the right moment for designing the feature that will certainly stay hidden and hold the current information behind the heading. To work on this we'll wrap a

.card-block

inside a

.collapse

element with an ID attribute-- the identical ID we should insert as a target for the link inside the

.card-title

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

id ="long-text-1"

Once this design has been set up you are able to put either the plain text or additional wrap your web content generating a bit more complicated structure. ( click this link)

Extended web content

Repeating the drill from above you can certainly provide as many elements to your accordion as you require to. And assuming that you prefer a material component to showcase extended-- specify the

.in

or possibly

.show

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

.in

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

.show

Conclusions

So primarily that is actually the way you are able to create an fully working and quite great looking accordion with the Bootstrap 4 framework. Do note it uses the card feature and cards do expand the entire space available by default. In this way mixed with the Bootstrap's grid column solutions you may simply create complex interesting designs placing the entire stuff within an element with specified quantity of columns width.