Toggle and Accordion In WordPress
To begin with, add an HTML element and copy the code you need. Insert the HTML element anywhere in the page, preferably close to the tab, accordion or toggle element. Then, add the code you need. For opening a specific tab, use this code. When a page is loaded, all Toggle widget items are collapsed. With the Accordion widget, however, the first item is expanded, while all other items remain collapsed. With the Toggle widget, as many items as desired can be expanded at the same time. With the Accordion widget, however, only one item can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. Accordion & Toggles. Any number of toggle/accordion elements are possible. You can either run them in accordion mode (only one open element) or in toggle mode (multiple open elmenets) Deeplinking support via hashtag (click on one item and see how the page url changes. You can link to the site with this url and the correct toggle will be opened) If you got a large number of toggles you can make them sortable by any number of tags.
In this tutorial on Visualmodo knowledge base we show you how to create and use theme elements in our WordPress themes: the Toggle and Accordion In WordPress page builder elements in a simple and easy way to help you in build a great page on your WordPress and show content in a beautiful way.
CORRECTION: This is how to style individual elements in tabs, accordion and toggle widgets separately. Elementor HTML widget tutorial: Custom CSS with Elementor free version: If you’re new to Elementor, learn the basics here: Hide Accordions on Mobile and tablet with Elementor free using Custom Breakpoints: iMessage Bubble layout for. Accordion & Toggles. Any number of toggle/accordion elements are possible. You can either run them in accordion mode (only one open element) or in toggle mode (multiple open elmenets) Deeplinking support via hashtag (click on one item and see how the page url changes. You can link to the site with this url and the correct toggle will be opened).
What Is WordPress Toggle and Accordion?
The Accordion Toggle element allows you to either set the functionality to accordion or toggle, view the demo site to find out the difference. You can style the accordion elements and assign background colors borders and more, so it will easily fit your theme design requirements. Add as many accordions on your pages within your site. In addition, uses to minify content on page load and let the user decide what is important for him to read. A great feature of use could be to use the accordion on your Frequently Asked Questions pages. The payment is a one time fee per site.
Open the admin area of your WordPress / dashboard. Go to pages, add new, select the ‘Back-end’ button and click on ‘Add element’ button. in the elements seletor window. Select the ‘Visual Elements’ tab as is shown on the attach photo below. Finally, an accordion section will be add on your content and you will be able to edit the content and style as is shown on the video tutorial.
In conclusion, new you’re ready to play with toggles and accordions section into your WordPress website. As a result, generate useful layouts like F.A.Q. pages.
Toggle and Accordion In WordPress using our WordPress themes – By Visualmodo
Award-Winning 24/7 customer service
Everyone on our Customer Care team is an experienced Visualmodo user and works in our office. As a result, nothing is ever outsourced.
Once again, thanks for purchasing one of our themes!
If you need any help, or have any suggestions, please feel free to contact us for Help Desk. If you loved the theme, we would really appreciate it if you could rate it.
Cheers!
Learn how to create an accordion (collapsible content).
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.
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
Step 1) Add HTML:
Example
<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>
Step 2) Add CSS:
Style the accordion:
Example
.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 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';
}
});
}
Try it Yourself »Animated Accordion (Slide Down)
To make an animated accordion, add max-height: 0, overflow: hidden and a transition for the max-height property, to the panel class.
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
.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>
Add Icons
Accordion-toggle
Add a symbol to each button to indicate whether the collapsible content is open or closed:
Example
Accordion Toggleaccordion And Toggle Elements
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 (-) */
}