Bootstrap Accordion Group

Overview

Web pages are the best place to showcase a impressive concepts along with beautiful web content in quite cheap and easy manner and get them attainable for the entire world to see and get used to. Will the web content you've provided receive customer's interest and concentration-- this stuff we may never ever discover before you actually get it live on web server. We have the ability to however suppose with a relatively serious possibility of correcting the impression of certain components over the website visitor-- determining either from our unique experience, the good techniques defined over the web or else most commonly-- by the approach a web page impacts ourselves during the time we're delivering it a design during the creation process. One point is certain yet-- great fields of clear text are really probable to bore the visitor and move the website visitor away-- so what to try when we just desire to apply this sort of larger amount of content-- like conditions and terms , frequently asked questions, technological requirements of a product or a support service which need to be summarized and exact and so on. Well that is certainly the things the design process in itself narrows down at the final-- identifying working answers-- and we ought to look for a solution working this out-- presenting the material required in pleasing and intriguing approach nevertheless it could be 3 webpages clear text prolonged.

A cool approach is cloaking the text within the so called Bootstrap Accordion Example feature-- it supplies us a powerful way to feature just the captions of our text message present and clickable on web page so commonly the whole information is obtainable at all times in a compact space-- usually a single display screen so that the customer may easily click on what is essential and have it expanded in order to get acquainted with the detailed material. This particular solution is additionally natural and web design considering that small acts have to be taken to continue functioning with the web page and in such manner we make the site visitor evolved-- somewhat "push the switch and see the light flashing" thing.

Exactly how to employ the Bootstrap Accordion Group:

Accordion example

Extend the default collapse behaviour to create an Bootstrap Accordion List.

<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 have in hand the excellent devices for setting up an accordion easy and fast employing the newly presented cards elements providing just a handful of additional wrapper elements. Listed here is how: To begin creating an accordion we initially need to have an element to wrap the entire item in-- generate a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( useful reference)

Next it is without a doubt about time to create the accordion panels-- bring in a

.card

element, inside it-- a

.card-header

to develop the accordion title. In the header-- add in an actual heading like

h1-- h6

with the

. card-title

class selected and inside of this specific heading wrap an

<a>

element to certainly bring the headline of the panel. In order to control the collapsing section we are certainly about to set up it should have

data-toggle = "collapse"

attribute, its aim should be the ID of the collapsing feature we'll make soon such as

data-target = "long-text-1"

as an example and at last-- making certain only one accordion element keeps expanded simultaneously we should really likewise add a

data-parent

attribute leading to the master wrapper with regard to the accordion in our situation it must be

data-parent = "MyAccordionWrapper"

An additional scenario

<!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 achieved it is without a doubt moment for designing the element that will stay hidden and keep the current web content behind the headline. To do this we'll wrap a

.card-block

inside a

.collapse

component together with an ID attribute-- the very same ID we should insert as a goal for the url in the

.card-title

from above-- for the example it should be like

id ="long-text-1"

As soon as this format has been established you are able to place either the plain text or extra wrap your content setting up a bit more complicated structure. ( additional reading)

Extended information

Repeating the training from above you have the ability to incorporate as many features to your accordion just as you require to. Also supposing that you prefer a web content component to show enlarged-- specify the

.in

.show

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

.in

class proceeds and inside of Alpha 6 it becomes switched out by

.show

Final thoughts

So simply speaking that's ways you can easily make an perfectly working and quite great looking accordion by having the Bootstrap 4 framework. Do note it applies the card component and cards do extend the entire zone accessible by default. So incorporated together with the Bootstrap's grid column options you have the ability to easily build complex pleasing formats setting the entire thing inside an element with defined quantity of columns width.