Bootstrap Accordion Group

Overview

Website pages are the best field to present a highly effective ideas along with pleasing information in relatively cheap and easy method and get them provided for the entire world to discover and get familiar with. Will the web content you've provided take customer's passion and attention-- this we can easily never notice till you really get it live to web server. We are able to however guess with a relatively great opportunity of correcting the impact of some features over the website visitor-- reviewing probably from our personal knowledge, the great techniques described over the internet as well as most generally-- by the approach a webpage affects ourselves while we're delivering it a shape during the development procedure. One point is clear though-- large zones of clear text are very probable to bore the customer as well as drive the site visitor away-- so what to perform as soon as we simply desire to place this sort of greater amount of content-- just like conditions and terms , frequently asked questions, special specifications of a goods or else a professional services which ought to be detailed and exact and so forth. Well that is actually things that the design process itself narrows down in the end-- spotting working answers-- and we should really uncover a method figuring this one out-- showcasing the content required in helpful and desirable approach nevertheless it could be 3 web pages clear text in length.

A cool technique is wrapping the text message in to the so called Bootstrap Accordion Styles element-- it supplies us a great way to come with just the subtitles of our message clickable and present on webpage so typically the entire web content is readily available at all times inside a small space-- commonly a single screen so that the customer are able to easily click on what is very important and have it developed to become knowledgeable with the detailed information. This strategy is really in addition natural and web format considering that small actions ought to be taken to keep on working with the page and so we have the website visitor advanced-- kind of "push the switch and see the light flashing" thing.

How to work with the Bootstrap Accordion Styles:

Accordion example

Prolong the default collapse activity to generate 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>

Within Bootstrap 4 we obtain the great tools for developing an accordion very easy and prompt applying the recently presented cards elements providing just a handful of extra wrapper features.Here is the way: To start creating an accordion we initially need to have an element to wrap all thing within-- create a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( click here)

Next step it is without a doubt point to set up the accordion sections-- incorporate a

.card

element, into it-- a

.card-header

to create the accordion title. In the header-- incorporate an actual headline like

h1-- h6

with the

. card-title

class assigned and just within this kind of heading wrap an

<a>

element to certainly have the heading of the section. For you to control the collapsing section we are certainly about to create it should have

data-toggle = "collapse"

attribute, its goal should be the ID of the collapsing element we'll create soon similar to

data-target = "long-text-1"

as an example and lastly-- making certain only one accordion element keeps extended at a time we should really also incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

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

Whenever this is completed it's moment for building the element which in turn will definitely stay hidden and carry the actual material behind the headline. To do this we'll wrap a

.card-block

inside a

.collapse

element along with an ID attribute-- the very same ID we should apply as a target for the url inside the

.card-title

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

id ="long-text-1"

After this structure has been established you can easily put either the clear text or else additional wrap your web content generating a little bit more complex structure. ( additional info)

Expanded content

Repeating the practice from above you are able to incorporate as many features to your accordion just as you need to. Also supposing that you desire a content component to present enlarged-- specify the

.in

or possibly

.show

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

.in

class goes and inside of Alpha 6 it becomes removed and replaced by

.show

Conclusions

So generally that is actually ways in which you can develop an perfectly working and pretty good looking accordion by having the Bootstrap 4 framework. Do note it employs the card feature and cards do extend the whole zone available by default. And so united along with the Bootstrap's grid column solutions you may easily make complex interesting layouts installing the entire stuff within an element with specified number of columns width.