Tutorial & code

Accordion

A simple CSS and JS accordion using the Beaver Builder Text module. Best for Beaver Builder Lite users.

CODE

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Modules Nav

Video

Bb Vid Cs

Notes

Best for Beaver Builder Lite user as the premium versions have an accordion module.

  1. Go to the text tab (circled in image below) to see the hidden HTML.
  2. To add and remove panels copy or delete one  panel section (see the image) which starts with: 
      <div class ="accordion">
  3. To change the look of the accordion go to the module’s advanced tab and the CSS section. (see the comment there which are also shown here below).
  4. Remove the highlighted section in the image below that links to the this tutorial ( <a style… </a>).
  5. Switch from the Text tab to the Visual tab to made it easier to add paragraphs, bold text or add images etc.

The code is adapted from W3 schools website

Beaver Accordion Panel

Beaver Accordion Cssl

Using the code without a plugin

Add the JavaScript code to the module in-between these tags:

<script> code here </script>

Add the CSS code to the module in-between these tags:

<style> code here </style>

See the Accordion template in action.

Example

Code

HTML 

<div class="accordion">
<h3>QUESTION 1</h3>
</div>
<div class="panel">

Move from the visual to the text tab (in this text editor module) when working with this. This way you can see and copy the HTML divs. Change colors in the advanced tab under CSS.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<a style="color: #ffc719; font-size: 18px; font-weight: bold;" href=" https://www.beaverjunction.com/templates/accordion/ " target="_blank" rel="noopener">INSTRUCTIONS HERE ➤ </a>

</div>
<div class="accordion">
<h3>QUESTION 2</h3>
</div>
<div class="panel">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>
<div class="accordion">
<h3>QUESTION 3</h3>
</div>
<div class="panel">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>
<div class="accordion">
<h3>QUESTION 4</h3>
</div>
<div class="panel">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

CSS 

h3{
display: inline;
line-height: 1;
color: #fff;   /*The text header color. 
Remove to had the default colour for headers set in your theme */ 
}
.accordion {
background-color:#FFC719; /* Change the accordion tab color here */ 
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
border-bottom: 3px solid #FFFFFF;
transition: 0.4s;
}
.active, .accordion:hover {
background-color:#000; /* Change the accordion tab hover color here or remove */ 
color: #fff;
}
.accordion:after {
content: '+';
font-weight: bold;
float: right;
font-size: 30px;   /* This sets the size of the + and - signs */ 
color: #fff;
position: relative;
bottom: 5px;
}


.accordion:hover:after {
color: white; /* change the color for the + and - signs on hover over the panel */ 
}

.active:after {
content: "−";
margin-left: 10px;
}

.panel {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

JavaScript 

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
} 
});
}

Discounts On These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction" 25% off

--------------------------------------------------------------

 

Get the Beaver Junction Plugins here

Get it now

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment