Faq Accordionaddress Users’ Concerns And Build Trust

Posted on  by 

  1. Faq Accordionaddress Users&rsquo Concerns And Build Trust Accounts
  2. Faq Accordionaddress Users&rsquo Concerns And Build Trust Funds
  3. Faq Accordionaddress Users&rsquo Concerns And Build Trust Distributions

Learn how to create an accordion (collapsible content).

The logo of cyrTUG, the Russian TeX User Group, is an accordion-playing lion. Slashdot author and linux.com editor The Accordionator (Emmett Plant) as a 'Geek Action Figure' Artist/painter Jacinto Guevara from San Antonio, Texas, is a conjunto button accordion player since 1977. Kata Plus is one an all in one addon for Elementor page builder that is fully compatible with Kata WordPress theme. Kata Plus is an all-in-one plugin that has a header, footer, and blog builder inside Styler (the new advanced tool for styling widgets) and comes with 18 practical widgets for creating different websites. This component has support for some native attributes, read the whitelist to find out more.

Accordion

Accordions are useful when you want to toggle between hiding and showing large amount of content:

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.

Faq

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.

Create An Accordion

Faq Accordionaddress Users&rsquo Concerns And Build Trust Accounts

Step 1) Add HTML:

Example

<button>Section 1</button>
<div>
<p>Lorem ipsum...</p>
</div>
<button>Section 2</button>
<div>
<p>Lorem ipsum...</p>
</div>
<button>Section 3</button>
<div>
<p>Lorem ipsum...</p>
</div>

Faq Accordionaddress Users&rsquo Concerns And Build Trust Funds

Step 2) Add CSS:

Style the accordion:

Example

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
Step 3) Add JavaScript:

Example

var acc = document.getElementsByClassName('accordion');
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener('click', function() {
/* Toggle between adding and removing the 'active' class,
to highlight the button that controls the panel */
this.classList.toggle('active');
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display 'block') {
panel.style.display = 'none';
} else {
panel.style.display = 'block';
}
});
}

Faq Accordionaddress Users&rsquo Concerns And Build Trust Distributions

Try it Yourself »

Animated Accordion (Slide Down)

Faq Accordionaddress Users’ Concerns And Build Trust

To make an animated accordion, add max-height: 0, overflow: hidden and a transition for the max-height property, to the panel class.

Faq Accordionaddress Users’ Concerns And Build Trust

Then, use JavaScript to slide down the content by setting a calculated max-height, depending on the panel's height on different screen sizes:

Example

<style>
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
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';
}
});
}
</script>
Try it Yourself »

Add Icons

Add a symbol to each button to indicate whether the collapsible content is open or closed:

Example

.accordion:after {
content: '02795'; /* Unicode character for 'plus' sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: '2796'; /* Unicode character for 'minus' sign (-) */
}
Try it Yourself »

Coments are closed