Drop-Down.com

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.

Accordion example

Accordion  good example
Accordion example
<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

 An additional  good 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>

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.

Check a number of video clip short training regarding Bootstrap Accordion

Related topics:

Bootstrap accordion main documentation

Bootstrap acoordion  formal  documents

How to make a Bootstrap v4 accordion collapse when clicking the whole header div?

How to make a Bootstrap v4 accordion collapse when clicking the whole header div?

GitHub:Collapse Accordion is still using Panels

GitHub:Collapse Accordion is still using Panels