Bootstrap Accordion List

Overview

Website pages are the best field to show a strong ideas along with amazing web content in easy and really cheap approach and have them accessible for the whole world to watch and get familiar with. Will the web content you've published earn viewers's passion and concentration-- this we can never figure out till you really take it live to web server. We are able to however presume with a relatively big chance of correcting the impact of some components over the website visitor-- reviewing probably from our own experience, the excellent methods illustrated over the internet or most generally-- by the way a page impacts ourselves during the time we're offering it a design during the design process. Something is certain though-- great spaces of plain text are very potential to bore the visitor and also move the site visitor out-- so exactly what to do as soon as we simply wish to insert such much bigger amount of text-- like conditions , frequently asked questions, practical standards of a material as well as a professional services which require to be summarized and exact and so forth. Well that is certainly what the creation process in itself narrows down in the end-- spotting working resolutions-- and we really should find a way working this one out-- feature the web content needed in pleasing and exciting way nevertheless it could be 3 web pages clear text prolonged.

A marvelous method is cloaking the content within the so called Bootstrap Accordion Table component-- it provides us a great way to feature just the explanations of our message clickable and present on web page and so generally the entire web content is obtainable at all times inside a compact area-- commonly a single display so the customer are able to simply click on what is very important and have it widened in order to get acquainted with the detailed content. This specific approach is as well user-friendly and web style due to the fact that minimal acts need to be taken to keep on functioning with the page and so we make the site visitor advanced-- type of "push the tab and see the light flashing" stuff.

How to employ the Bootstrap Accordion Form:

Accordion example

Expand the default collapse activity to design an Bootstrap Accordion Menu.

<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 creating an accordion prompt and easy employing the recently provided cards features providing just a few additional wrapper components. Listed here is how: To start building an accordion we primarily really need an element to wrap the whole item within-- make a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( learn more)

Next step it is undoubtedly the right time to establish the accordion sections-- provide a

.card

element, inside it-- a

.card-header

to make the accordion title. Inside the header-- bring in an original headline like

h1-- h6

with the

. card-title

class specified and in this kind of heading wrap an

<a>

element to certainly carry the heading of the panel. In order to control the collapsing panel we are definitely about to build it really should have

data-toggle = "collapse"

attribute, its goal needs to be the ID of the collapsing feature we'll generate soon such as

data-target = "long-text-1"

for example and finally-- to make assured just one accordion feature continues to be widened at a time we need to additionally bring in a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our case it must be

data-parent = "MyAccordionWrapper"

One more situation

<!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 accomplished it is definitely time for developing the component which in turn will definitely stay concealed and hold the original web content behind the headline. To carry out this we'll wrap a

.card-block

within a

.collapse

element along with an ID attribute-- the very same ID we must put just as a target for the url in the

.card-title

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

id ="long-text-1"

When this structure has been produced you can easily set either the clear text or else additional wrap your web content setting up a bit more complicated design. ( more helpful hints)

Expanded material

Repeating the practice from above you can certainly add as many features to your accordion as you need to. And also assuming that you desire a web content element to display extended-- specify the

.in

or possibly

.show

classes to it inning accordance with the Bootstrap 4 build edition you are actually utilizing-- up to Alpha 5 the

.in

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

.show

Final thoughts

So primarily that's how you are able to create an completely working and very excellent looking accordion using the Bootstrap 4 framework. Do note it uses the card element and cards do spread the entire space provided by default. So mixed with the Bootstrap's grid column opportunities you can conveniently create complex wonderful styles placing the whole thing within an element with specified number of columns width.