Bootstrap Accordion Group

Intro

Websites are the greatest field to showcase a amazing ideas along with attractive content in simple and really cheap method and have them attainable for the entire world to see and get used to. Will the content you've posted grab client's passion and concentration-- this stuff we can never find out until you really provide it live upon web server. We have the ability to however think with a really great possibility of correcting the impact of several components over the website visitor-- valuing perhaps from our unique practical experience, the excellent techniques illustrated over the web or most typically-- by the way a page influences ourselves during the time we're providing it a design during the construction process. One point is sure yet-- huge areas of plain text are very potential to bore the customer as well as push the viewers away-- so what exactly to perform when we simply need to apply this kind of greater amount of text message-- like conditions , commonly asked questions, tech specifications of a product as well as a customer service which need to be revealed and exact and so on. Well that is certainly what the creation procedure in itself narrows down at the final-- discovering working methods-- and we really should discover a solution working this one out-- feature the web content needed in beautiful and exciting way nevertheless it could be 3 web pages plain text in length.

A good approach is covering the text within the so called Bootstrap Accordion Table feature-- it presents us a great way to come with just the explanations of our content present and clickable on web page so typically the entire content is obtainable at all times inside a compact area-- commonly a single display so that the customer may easily click on what is necessary and have it widened to get knowledgeable with the detailed information. This particular solution is certainly in addition natural and web format given that small activities need to be taken to proceed performing with the web page and in this way we make the site visitor evolved-- sort of "push the tab and see the light flashing" stuff.

The ways to utilize the Bootstrap Accordion Menu:

Accordion example

Extend the default collapse behaviour to develop an Bootstrap Accordion Group.

<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 receive the ideal instruments for making an accordion prompt and simple employing the newly provided cards elements bring in just a handful of special wrapper features. Listed below is the way: To begin making an accordion we primarily need to have an element in order to wrap the entire thing within-- provide a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( click this)

Next step it is undoubtedly about time to make the accordion panels-- incorporate a

.card

element, into it-- a

.card-header

to form the accordion caption. Within the header-- incorporate an actual headline such as

h1-- h6

with the

. card-title

class selected and inside of this specific headline wrap an

<a>

element to actually carry the heading of the section. For control the collapsing section we are really about to set up it should have

data-toggle = "collapse"

attribute, its target must be the ID of the collapsing component we'll generate in a minute like

data-target = "long-text-1"

as an example and lastly-- to make certain only one accordion component stays spread out at once we ought to additionally bring in a

data-parent

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

data-parent = "MyAccordionWrapper"

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

When this is done it is without a doubt moment for designing the component which is going to stay hidden and maintain the actual web content behind the heading. To carry out this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the similar ID we must apply serving as a goal for the url in the

.card-title

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

id ="long-text-1"

After this structure has been generated you can certainly set either the clear text or else additional wrap your web content making a little more complicated structure. ( get more information)

Enhanced web content

Repeating the practice from above you can incorporate as many features to your accordion as you need to. And if you want a information feature to showcase widened-- appoint the

.in

or possibly

.show

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

.in

class proceeds and in Alpha 6 it becomes switched out by

.show

Final thoughts

So generally that is actually the way in which you can easily deliver an completely working and very good looking accordion having the Bootstrap 4 framework. Do note it uses the card component and cards do expand the entire zone accessible by default. So mixed along with the Bootstrap's grid column features you have the ability to easily generate complex interesting styles inserting the entire stuff within an element with defined variety of columns width.