Bootstrap Accordion Form

Overview

Website pages are the most popular field to showcase a strong ideas along with attractive content in simple and relatively cheap way and have them obtainable for the entire world to see and get used to. Will the content you've offered earn customer's passion and attention-- this we can never ever notice till you actually provide it live upon server. We have the ability to however suppose with a really serious chance of correcting the impression of some features over the website visitor-- judging either from our personal experience, the good methods explained over the web or most commonly-- by the way a page impacts ourselves as long as we're delivering it a shape during the designing process. One point is certain yet-- great fields of plain text are really probable to bore the user and push the visitor away-- so exactly what to do as soon as we simply require to insert this sort of much larger amount of text-- for example terms and conditions , frequently asked questions, technical requirements of a product or a service which need to be specificed and exact etc. Well that is simply what the design process itself narrows down in the end-- identifying working answers-- and we ought to look for a solution figuring this one out-- feature the material needed in attractive and interesting approach nevertheless it could be 3 pages clear text in length.

A great solution is covering the content into the so called Bootstrap Accordion Table component-- it supplies us a highly effective way to provide just the subtitles of our content clickable and present on page and so basically the whole content is accessible at all times within a small space-- usually a single display screen so that the user can easily click on what's important and have it expanded to get acquainted with the detailed information. This particular approach is in addition instinctive and web design since small actions ought to be taken to proceed functioning with the webpage and in this way we keep the website visitor progressed-- somewhat "push the switch and see the light flashing" stuff.

The best way to employ the Bootstrap Accordion Menu:

Accordion example

Increase the default collapse behaviour to develop 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>

Inside Bootstrap 4 we receive the perfect devices for developing an accordion very easy and prompt making use of the recently delivered cards elements including just a few extra wrapper features. Listed below is the way: To start generating an accordion we initially need to have an element to wrap the whole item into-- develop a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( additional reading)

Next it is without a doubt time to build the accordion sections-- put in a

.card

element, in it-- a

.card-header

to form the accordion headline. Inside the header-- add an actual heading like

h1-- h6

with the

. card-title

class specified and inside of this headline wrap an

<a>

element to effectively bring the heading of the section. In order to control the collapsing section we are undoubtedly about to develop it should certainly have

data-toggle = "collapse"

attribute, its target must be the ID of the collapsing component we'll produce soon similar to

data-target = "long-text-1"

for instance and lastly-- to make sure only one accordion component keeps expanded at once we ought to likewise provide a

data-parent

attribute leading to the master wrapper with regard to the accordion in our example 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>

Once this is achieved it is undoubtedly the right moment for making the element that will stay concealed and hold the current web content behind the heading. To perform this we'll wrap a

.card-block

within a

.collapse

element together with an ID attribute-- the identical ID we must insert like a goal for the link inside the

.card-title

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

id ="long-text-1"

After this system has been generated you can set either the clear text or additional wrap your content making a little bit more complicated form. ( more hints)

Enhanced information

Repeating the drill from above you can certainly incorporate as many elements to your accordion as you want to. Also assuming that you desire a material component to show expanded-- assign the

.in

.show

classes to it baseding upon the Bootstrap 4 build edition you're working with-- up to Alpha 5 the

.in

class goes and in Alpha 6 it becomes switched out by

.show

Final thoughts

So basically that is actually the way you can develop an perfectly functioning and quite good looking accordion with the Bootstrap 4 framework. Do note it employs the card feature and cards do extend the whole space available by default. In this way incorporated along with the Bootstrap's grid column options you may simply set up complex appealing layouts placing the whole thing within an element with specified number of columns width.