Example
Here you can see a full working example of the Accordion. The basic version in the step-by-step Guide doesn’t include those arrows, but it’s described below how you can achieve that with a few lines of CSS.
Accordion Header
Excerpt of some Tutorials:
Accordion Header
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Video Walkthrough
Step-by-step guide
Accordion Wrapper
Accordion now supports multiple instances. That means, that you can have multiple Accordions with different settings (all opened, only one opened) in one page. You can now also mix them up. One Wrapper supports multiple opened, the other only one opened at the same time, that’s why we need first a Wrapper Element:
Accordion Header & Content
For every Accordion Element inside that Wrapper you’ll need to create one header and one content element, which is basically nothing else than a container element. You can place any Element inside that Container, whatever you prefer!
There is at least one CSS-Class necessary to make it work: .wcd_accordion_header which you have to assign to your accordion header-element (container-wrapper). You could also assign wcd_accordion_active to any header-element. Those elements are opened by default then.
Make sure to assign at least .wcd_accordion_header to the corresponding container-element (screenshot below).
Enqueue & Initialize the Accordion
Assuming that you are using the child-theme, you can follow the Instruction below. If not you have to copy the full source code and initialize the accordion then.
<?php
wp_enqueue_script('wcd_accordion');
add_action('wp_footer', function() {
?>
<script>
const demoAccordion = new WCD_accordion({
target: '#newAccordion',
multiple: false,
duration: '0.4s',
});
</script>
<?php
}, 99);
?>Options & Parameter to adapt
| Option Name | Type | Default Value | Note |
|---|---|---|---|
| target | String | - | ID of your Accordion-Wrapper. Include the hash (#) sign! |
| multiple | Boolean | false | Whether only one accordion-element can be opened at the same time or not! |
| duration | String | - | The duration of the open/close effect. Example: '0.4s' |
Example of a completed Options Object:
const options = {
menu: '#newAccordion',
multiple: false,
duration: '0.4s',
}Full Source Code
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/accordion/wcd_accordion.js