Bootstrap Accordion Group

Intro

Websites are the most excellent place to display a impressive concepts along with beautiful content in pretty cheap and simple manner and get them provided for the whole world to check out and get familiar with. Will the content you've published score audience's interest and attention-- this stuff we can easily certainly never know till you actually provide it live upon hosting server. We can however guess with a pretty serious opportunity of correcting the impression of some elements over the website visitor-- valuing probably from our personal prior experience, the great techniques described over the web as well as most commonly-- by the manner a webpage has an effect on ourselves as long as we're offering it a shape during the designing process. One point is certain yet-- great spaces of plain text are pretty probable to bore the site visitor and also push the customer away-- so what to produce if we simply just need to put this sort of greater amount of content-- like conditions and terms , frequently asked questions, professional lists of specifications of a product or a support service which require to be summarized and exact and so on. Well that is definitely what the creation process itself narrows down at the end-- obtaining working options-- and we ought to find a way working this out-- showcasing the web content needed in beautiful and fascinating manner nevertheless it might be 3 pages plain text extensive.

A great strategy is cloaking the text in to the so called Bootstrap Accordion Example feature-- it supplies us a strong way to get just the subtitles of our text message clickable and present on webpage so generally all content is attainable at all times in a small space-- frequently a single display with the purpose that the visitor can easily click on what is necessary and have it developed in order to get familiar with the detailed material. This particular method is definitely additionally intuitive and web style since small acts need to be taken to proceed operating with the page and in this way we make the visitor progressed-- type of "push the button and see the light flashing" stuff.

How to employ the Bootstrap Accordion Table:

Accordion example

Increase the default collapse activity to make 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 obtain the ideal instruments for designing an accordion simple and prompt applying the newly offered cards elements adding just a few additional wrapper features. Listed below is how: To start setting up an accordion we first need to have an element in order to wrap all thing within-- provide a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( check this out)

Next step it is undoubtedly about time to make the accordion sections-- provide a

.card

element, inside it-- a

.card-header

to create the accordion title. Inside the header-- add an original heading like

h1-- h6

with the

. card-title

class assigned and inside of this kind of headline wrap an

<a>

element to actually carry the headline of the panel. For you to control the collapsing section we are undoubtedly about to set up it should have

data-toggle = "collapse"

attribute, its goal should be the ID of the collapsing component we'll set up soon such as

data-target = "long-text-1"

for instance and at last-- to make certain only one accordion component remains widened at once we ought to in addition provide a

data-parent

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

data-parent = "MyAccordionWrapper"

A different 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 achieved it is definitely the right moment for generating the element which is going to stay concealed and hold up the current 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 place as a goal for the url within the

.card-title

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

id ="long-text-1"

As soon as this structure has been produced you are able to insert either the clear text or else further wrap your content creating a little bit more complex structure. ( additional hints)

Expanded material

Repeating the exercise from above you can certainly provide as many elements to your accordion just as you want to. And also in the case that you would like a material feature to show enlarged-- appoint 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 goes and in Alpha 6 it gets replaced by

.show

Conclusions

So generally that is actually how you are able to generate an fully functioning and pretty excellent looking accordion utilizing the Bootstrap 4 framework. Do note it applies the card component and cards do extend the whole space accessible by default. In this way combined with the Bootstrap's grid column solutions you may easily generate complex interesting styles positioning the entire stuff inside an element with defined amount of columns width.