Bootstrap Accordion Group

Intro

Web pages are the finest field to showcase a amazing ideas and also beautiful information in easy and pretty cheap method and get them provided for the entire world to check out and get familiar with. Will the information you've published gain client's passion and attention-- this we may never ever notice until you really bring it live for web server. We can however suppose with a very great chance of correcting the effect of certain elements over the website visitor-- valuing probably from our personal prior experience, the excellent methods identified over the internet or else most generally-- by the approach a webpage has an effect on ourselves as long as we're providing it a good shape during the development process. One point is certain yet-- great zones of clear text are really feasible to bore the client and also drive the viewers out-- so just what to produce if we simply really need to put this kind of bigger amount of text message-- like conditions and terms , commonly asked questions, technical lists of specifications of a product or else a professional service which ought to be described and exact and so on. Well that is definitely what the design process itself narrows down in the end-- obtaining working resolutions-- and we ought to discover a way working this one out-- present the content needed in attractive and interesting manner nevertheless it might be 3 pages plain text extensive.

A cool strategy is enclosing the content into the so called Bootstrap Accordion Group element-- it provides us a great way to feature just the captions of our content clickable and present on webpage and so normally all web content is obtainable at all times within a small area-- commonly a single screen so the site visitor are able to easily click on what's important and have it extended in order to get familiar with the detailed content. This solution is also intuitive and web style since small activities have to be taken to go on working with the web page and so we keep the visitor advanced-- type of "push the tab and see the light flashing" stuff.

Effective ways to put into action the Bootstrap Accordion Form:

Accordion example

Prolong the default collapse behaviour 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>

Inside Bootstrap 4 we obtain the perfect instruments for generating an accordion prompt and very easy making use of the recently offered cards features providing just a handful of special wrapper features. Listed here is the way: To start building an accordion we primarily need an element to wrap the entire thing within-- make a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( discover more)

Next step it is without a doubt about time to make the accordion sections-- provide a

.card

element, inside it-- a

.card-header

to forge the accordion headline. In the header-- add in an actual headline like

h1-- h6

with the

. card-title

class assigned and inside of this 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 create it should certainly have

data-toggle = "collapse"

attribute, its target needs to be the ID of the collapsing component we'll build soon like

data-target = "long-text-1"

for example and at last-- to make sure only one accordion feature keeps expanded at once we should really in addition add a

data-parent

attribute leading to the master wrapper for the accordion in our example it must be

data-parent = "MyAccordionWrapper"

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

As soon as this is handled it is definitely the right moment for generating the feature which in turn will definitely stay hidden and hold up the original material behind the heading. To carry out this we'll wrap a

.card-block

inside a

.collapse

element with an ID attribute-- the very same ID we have to place as a target for the web link within the

.card-title

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

id ="long-text-1"

When this system has been developed you are able to apply either the clear text or extra wrap your content generating a little more complex design. ( additional resources)

Extended material

Repeating the drill from above you are able to add in as many elements to your accordion as you want to. And supposing that you would like a web content feature to show expanded-- select the

.in

or possibly

.show

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

.in

class goes and within Alpha 6 it gets switched out by

.show

Conclusions

So simply speaking that is definitely ways in which you have the ability to provide an completely working and quite excellent looking accordion by using the Bootstrap 4 framework. Do note it uses the card element and cards do expand the entire zone available by default. And so united along with the Bootstrap's grid column solutions you have the ability to quickly develop complex appealing configurations setting the whole thing within an element with specified amount of columns width.