Read More / Read Less Toggle in Bricks Builder

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.

Step-by-step guide

The Step-by-Step Instructions always assume that you have installed the child-theme. If not you will have to manually enqueue the script/styles.

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

As you maybe saw in the Code above, there are a few options you can adapt to change the behaviour of the Mega-Menu:

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

This Section get's updated automatically and always shows the latest Version of the source-code. You can copy & paste that code if you haven't installed the child-theme.

https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/rmrl/wcd_rmrl.js

Hosted with ❤️ by Github, created with bricks