In this tutorial, you will learn how to add the Show more/less button in Gutenberg (WordPress page builder) to your pages. This method can also be used for Elementor and other page builders.

show more content in WordPress without plugin

You can use this method to show more text, an image, or a group of blocks in Gutenberg.

Show more/less content in WordPress without plugins

Step1: Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and update it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

/** 
* Show more/less in WordPress by WPCookie
* https://redpishi.com/wordpress-tutorials/show-more-wordpress/
*/
add_filter( 'wp_footer', function ( ) {  ?>
<script>
	let fade = "1"  // 0 or 1
	let height = "6rem"  // use px, em or rem
</script>
<style id="show-more-style">
:root {
  --show-more-color: white;
}
.more-content {
	position: relative;
	max-height: 6rem;
	overflow: hidden;
	transition: all 0.7s ease;
}
.more-content:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--show-more-color) 0%, rgba(256,256,256,0) 35%);
	pointer-events: none;
}
.more-content.open {
	max-height: 1000px;
}
.more-content.open:before {
    content: '';
    visibility: hidden;
} 
.show-more {
	cursor: pointer;
}
</style>
<script>
const moreContent = [...document.querySelectorAll(".more-content")]
const showMore = [...document.querySelectorAll(".show-more")]
showMore?.forEach( btn => btn.addEventListener("click", e => {
	index = showMore.findIndex( h => h == e.target.parentElement  );
	if(moreContent[index].classList.contains("open") ){
		moreContent[index].classList.remove("open");
		e.target.innerHTML = "Show more";
	} else {
		moreContent[index].classList.add("open");
		e.target.innerHTML = "Show less";
	}} ))
let add = "";
if ( fade == 0 ) {
 add = 	".more-content:before { background: #ffffff00; }"
} 
add +=  ".more-content {  max-height: "+height+"; }"
document.querySelector("#show-more-style").innerHTML += add
</script>
<?php });

Step2: Add Blocks and assign correct class to them

In the WordPress editor, add a paragraph block, write your desired text in it and assign the “more-content” class to it.
If you want to hide more than one block, you must group them first, then assign the “more-content” class to it.

Assign a class to a paragraph block in Gutenberg to hide its content

Next, add a button block to the page, name it Show more, change its color to your liking, and then add the “show-more” class to it.

Show more button on WordPress

it’s done, if you save the page, you will see the “Show more” button working properly.

Step3: Customize the “Show more” button

To remove the fade effect, change the “fade” variable from 1 to 0.

Remove the fade effect for content
let fade = "1"  // 0 or 1

To change the height of the content, you can change the “height” variable.

Change the height of the content to show in WordPress
let height = "6rem"  // use px, em or rem

If this article is difficult for you to read in text, you can watch the video version below.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 56

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *