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.

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.

/** 
* 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.

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.

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.

let fade = "1"  // 0 or 1

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

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.