Bootstrap Accordion Group

Intro

Web pages are the most popular place to present a powerful concepts and fascinating web content in pretty cheap and simple method and get them provided for the whole world to discover and get familiar with. Will the material you've provided take client's passion and concentration-- this stuff we can easily never figure out until you really take it live on hosting server. We can however guess with a really great chance of being right the impact of several features over the website visitor-- reviewing possibly from our individual practical experience, the excellent strategies described over the net or else most generally-- by the manner a webpage influences ourselves while we're delivering it a shape during the development process. One point is sure though-- great fields of clear text are very feasible to bore the site visitor and also push the viewers out-- so what exactly to do when we simply need to place this type of bigger amount of text message-- just like conditions and terms , commonly asked questions, technological specifications of a goods or a support service which in turn need to be detailed and exact etc. Well that is simply things that the development process in itself narrows down in the end-- spotting working methods-- and we need to discover a solution working this one out-- display the material required in pleasing and fascinating approach nevertheless it could be 3 web pages clear text long.

A good approach is cloaking the text message into the so called Bootstrap Accordion Form feature-- it provides us a strong way to have just the explanations of our message present and clickable on web page and so generally the entire material is obtainable at all times within a compact space-- frequently a single display screen so that the site visitor can easily click on what is very important and have it enlarged in order to get acquainted with the detailed information. This particular strategy is also user-friendly and web style given that minimal acts need to be taken to proceed doing the job with the webpage and in this way we keep the visitor evolved-- type of "push the switch and see the light flashing" thing.

Ways to use the Bootstrap Accordion List:

Accordion example

Extend the default collapse activity to design an Bootstrap Accordion Styles.

<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 have in hand the ideal devices for developing an accordion prompt and simple using the newly presented cards elements providing just a few additional wrapper features. Listed below is the way: To start setting up an accordion we primarily need to have an element to wrap the whole thing inside-- make a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( discover more)

Next step it is undoubtedly the right time to make the accordion panels-- include a

.card

element, in it-- a

.card-header

to forge the accordion headline. In the header-- add an original headline such as

h1-- h6

with the

. card-title

class selected and in this kind of headline wrap an

<a>

element to actually carry the headline of the section. For you to control the collapsing section we're about to create it really should have

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing component we'll create in a minute such as

data-target = "long-text-1"

as an example and at last-- to make assured only one accordion element keeps spread out at once we ought to at the same time incorporate a

data-parent

attribute pointing to the master wrapper for the accordion in our good 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 completed it is undoubtedly moment for setting up the feature which will certainly stay concealed and hold up the original web content behind the heading. To execute this we'll wrap a

.card-block

inside a

.collapse

element with an ID attribute-- the same ID we have to apply like a goal for the link inside the

.card-title

from above-- for the example it should be like

id ="long-text-1"

As soon as this design has been made you can certainly apply either the clear text or additional wrap your material developing a little bit more complicated form. ( click this link)

Expanded web content

Repeating the practice from above you can put in as many features to your accordion as you need to. And also if you prefer a web content element to display widened-- specify the

.in

or possibly

.show

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

.in

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

.show

Final thoughts

So primarily that is actually ways in which you have the ability to deliver an totally working and pretty great looking accordion using the Bootstrap 4 framework. Do note it uses the card element and cards do expand the entire space available by default. And so integrated with the Bootstrap's grid column possibilities you have the ability to simply develop complex wonderful designs placing the entire stuff inside an element with defined quantity of columns width.