Close Menu
Voxel

**Updated Mar 13, 2023** Toggle Expand Read More Paragraph

4 Mins Read2415
Website layout

March 30, 2023

If you are experiencing problems with these instructions, it’s because the Voxel text editor, for some reason, adds additional paragraph tags (<p></p>) each time the widget is saved.

I’m hoping the Voxel team fixes this soon. In the meantime, you can make sure there is only one set of paragraph tags around the dynamic tag so it looks like this <p>Description</p> or this <p>@post(description)</p>

ADDED

  • AddedAdded paragraph tag to #toggle-paragraph.
  • AddedAdded the shortcode block in linear.

Fixed

  • FixedFix for issue with paragraph duplicating is pending.

**** UPDATED ****  March 11, 2023 
Had to make some small changes as I saw some of you had issues with caching and optimization plugins.

I love to share any ideas, tips, and tricks. Like I always say: Sharing is caring.

This is a work in progress. I always try to find ways to improve the code. I learned to code the old-school way. Check back for more updates.

Please comment below with ideas to make any improvements.

Difficulty

Challenging

This post is for the users of the Voxel Theme

Elementor has many widgets and features that go with their dynamic tags, but there are times when you install a custom theme that implement its own dynamic tag features, which makes it a bit difficult to natively get it to work with the Elementor widgets. Or maybe you just don’t want to get the Pro version of Elementor just for one or two features. Worse yet, would be to have to get a whole other plugin just for that one feature you are trying to accomplish, so I figured I would just create the feature myself and share it with my Voxel friends. These are instructions for adding the ability to toggle a Read More and Read Less.

I added the code to a plugin I created, which I think is best for future troubleshooting where you can just deactivate the plugin to do any website troubleshooting.

I have also divided the plugin into separate components so if the Voxel team adds any of the features natively to the Voxel theme, then you can just remove the component from the plugin itself so it’s less code to render.

Note: The shortcode for the Read More Toggle works with the Elementor Text Editor Widget.

Step One:

On the Elementor Text Editor Widget, add the following:
CSS ID: toggle-paragraph
CSS Class: toggle-paragraph

Settings for Binary Blackboard titlle text editor classes

Step Two:

Add the Elementor Shortcode widget right underneath the Elementor Text Editor widget that will contain the paragraph in which you want to use the Read More Read Less feature.

Add the following to the Elementor Shortcode widget:
CSS ID: toggle-paragraph-btn
CSS Class: toggle-paragraph-btn

Screenshot of a setting

In that Elementor Shortcode widget add the following shortcode:

				
					
[paragraph-expander 
 max-words="200"
 max-lines="5"
 btn-text-more="Read More"
 btn-text-less="Read Less"
 font-size="14px"
 font-color="#333333"
 font-weight="600"]

The code above is arranged for better readability.
But the shortcode should really be added the way it is below.

				
					[paragraph-expander max-words="200" max-lines="5" btn-text-more="Read More" btn-text-less="Read Less" font-size="14px" font-color="#333333" font-weight="600"]

Step Three:

This sets the max number of words to display while the paragraph is collapsed.

max-words=”200″
The shortcode allows you to set certain attributes. Here is an explanation for each attribute which you can set to whichever best fits your design.

max-lines=”5″
This sets the number of lines that are visible when the paragraph is collapsed.

btn-text-more=”Read More”
This sets what you want the Read More toggle to say. For example, you can set it to btn-text-more=”View More”

btn-text-less=”Read Less”
This sets what you want the Read Less toggle to say. For example, you can set it to btn-text-less=”View Less”

font-size=”14px”
This sets the font size of the “Read More” and “Read Less” toggle text

font-color=”#333333″
This sets the font color of the “Read More” and “Read Less” toggle text.

font-weight=”600″
This sets the font weight of the “Read More” and “Read Less” toggle text.

Just add the following code to the functions.php file in the Voxel Child Theme.

				
					function binary_blackboard_expand_paragraph( $atts ) {

	// Shortcode attributes.
	$expand_attr = shortcode_atts( array(
			'max-words' => 200,
			'max-lines' => 5,
			'btn-text-more' => 'Read More',
			'btn-text-less' => 'Read Less',
			'font-size' => '14px',
			'font-color' => '#333333',
			'font-weight' => '600',
		), $atts );

	$max_words_attr = $expand_attr['max-words'];
	$max_lines_attr = $expand_attr['max-lines'];
	$read_more_attr = $expand_attr['btn-text-more'];
	$read_less_attr = $expand_attr['btn-text-less'];
	$font_size = $expand_attr['font-size'];
	$font_color = $expand_attr['font-color'];
	$font_weight = $expand_attr['font-weight'];

	$bbpost_description = '

	<style>
	#toggle-paragraph p {
		--max-lines:' . $max_lines_attr . ';
        --line-height: 1.6;
        line-height: var(--line-height);
        overflow: hidden;
        position: relative;
        padding-bottom: 1em;
    }

    #toggle-paragraph p::before {
    	content: "";
        position: absolute;
        height: calc(1em * var(--line-height));
        width: 100%;
        bottom: 0;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, #FFFFFF);
    }

    .toggle-paragraph-btn {
    	font-size: ' . $font_size . ';
        color: ' . $font_color . ';
        font-weight: ' . $font_weight . ';
        background :none;
        cursor: pointer;
    }

    .toggle-paragraph-btn::before {
    	content: " ' . $read_more_attr . ' ";
    }

    .toggle-paragraph-btn-triggered::before {
    	content: "' . $read_less_attr . '";
    }

    .toggle-paragraph-expanded {
    	max-height: none !important;
    }
    </style>

	<script type="text/javascript">
		const pToToggle = document.querySelector("#toggle-paragraph p");
		const pToggleString = document.querySelector("#toggle-paragraph p").textContent;
		const paraToggleBtn = document.querySelector("#toggle-paragraph-btn");
		const pToggleBtn = document.querySelector(".toggle-paragraph-btn");

		const countWordsPara = pToggleString => {
			return pToggleString.split(" ").length;
		};
		const totalWordCount = countWordsPara(pToggleString);

		if (totalWordCount > ' . $max_words_attr . ') {
			pToToggle.style.maxHeight = "calc(var(--max-lines) * 1em * var(--line-height))";
		} else {
			pToToggle.classList.toggle("toggle-paragraph-expanded");
			paraToggleBtn.style.display = "none";
			
		};

		paraToggleBtn.addEventListener("click", function() {
			pToToggle.classList.toggle("toggle-paragraph-expanded");
			pToggleBtn.classList.toggle("toggle-paragraph-btn-triggered");
		});

	</script>
	';

	return $bbpost_description;

};
add_shortcode( 'paragraph-expander', 'binary_blackboard_expand_paragraph' );
Table Of Content

Table of Content

Share.

Related Posts

15 Comments

  1. Duncan Hesketh on

    Hi Richard,

    I love this and have tried to add this widget and the code etc as above but for some reason it doesn’t show or work?

    Any ideas as to why this might be? I have some profile listings that are very long and this would be awesome to include

    Reply
    • Richard on

      Hi Duncan,
      Could you please set the WP_DEBUG to true and check the page on the front end where you added the shortcode? Let me know if you see any errors.

      Reply
      • Duncan on

        Hi Richard, thanks and clearly having a blonde moment. I think i added this correctly to wp-config and changed to “true” but still do not see any change to front end template that this was added to?

        Reply
        • Richard on

          So you don’t even see the shortcode in plain text, either? If you want, I can help you if you email me temporary access. I’m also working on a simpler version of this if you prefer.

          Reply
        • Richard on

          I finally got it to work. But I did see a few reasons it wasn’t working.

          1. I didn’t see where you added the function for the Read More, Read Less that I created, so I added it to your Child’s function.php.

          2. The caching plugin or Autoptimize was preventing the shortcode from rendering.

          3. The third reason is something I have to adjust on this post because I realize that besides the fact that Vuejs uses a virtual dom, if there is an optimization plugin such as the one you have, then the javascript I created would show as null because the virtual dom has not finished. So I added a function to the code for it to run after the window has loaded.

          Reply
          • duncan on

            Thanks Richard and looks great. Sorry for your troubles and hope the coffee helps.

            How did you get around the caching/plugin issue – i have other sites i am working on and would like to copy what you have done here without the same issues.I assume i can now copy what you have done here on to the other post types within this site as you have fixed the code to work as mentioned?

            Also I did copy your code above but i see the one you used in the PHP had an initial line that is not present above.

          • Duncan on

            I received your mails but when i reply it bounces back as undelivered and failed.

            host mail.binaryblackboard.com [190.92.157.124]
            SMTP error from remote mail server after end of data:
            550 “The mail server detected your message as spam and has prevented delivery.”

    • Richard on

      Hi, I should probably remove that since most just add the code to the fuctions.php file. I had created a plugin that added the feature, but I know most people don’t like to add more plugins. You can just add the code to your functions.php file in the child theme. I’m going to remove step three. Thanks!

      Reply
      • Break on

        Hi, I added the code to the function.php child theme file.
        For shortcode I left only [paragraph-expander].
        I still got the same results – only the button at the very top above the content is visible, while the text is fully expanded. Thanks 🙂

        Reply
        • Richard on

          Hi, I think the issue may be that the Voxel text editor widget automatically adds paragraph tags which then breaks my code. Please try removing the “p” on lines 25, 34, 66, and 67

          Please let me know if this helps. You can contact me through the contact page and send me a screenshot of the page source to see if the paragraph tags are added or not. Cheers!

          Reply
  3. Sveta on

    Hello,
    does this code still valid for the current Voxel version? I tried to use it but seems it not working for me.
    Will appreciate any help:)

    Reply
    • Richard on

      Hi, I haven’t tested with the very latest version. Are you getting any errors? Did you have this working before? Or is this the first time you are adding this feature?

      Reply
Leave A Reply