Example
Here you can see a full working example!
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
Create the Layout
You’re totally free to what you place here. You could wrap it in a Container (as in the example) or just add a Text-Block here. There is onl one thing you have to keep in mind:
Make sure that the content and the trigger are immediate siblings (same hierarchical level) of each other.
In the example the Container Element and the Button element are siblings!
Want to have smooth open/close behaviour? Just head over to the CSS-Tab of your Content and add a transition: eg
all 0.7s ease

Assign An Attribute to the Content-Part
Next you only need to assign an attribute to the content-part. In my Case it’s the container-wrapper element here:
Name the attribute: wcd_rmrl_percentage
you can choose whatever Value you prefer.

The Value is the percentage-value of the content to be shown. 20 here means that 20% of the content are visible when collapsed!
Enqueue & Initialize The RM/RL Toggle
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.
Place that piece of code anywhere on your Page to initialize the RM/RL Toggle(s). The Code will place itself in the footer of your site then!
<?php
wp_enqueue_script('wcd_rmrl');
add_action('wp_footer', function() {
?>
<script>
const rmrl = new WCD_rmrl({
readLessText : 'Read Less',
readMoreText : 'Read More',
});
</script>
<?php
}, 99);
?>
Options & Parameter to adapt
Option Name | Type | Default Value | Note |
---|---|---|---|
readLessText | String | - | The text which should be shown when toggling the Element to expanded state. |
readMoreText | String | - | The text which should be shown when toggling the Element to collapsed state. |
Full Source Code
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/rmrl/wcd_rmrl.js