For one of my client sites I was building, they had some testimonials that were quite long in length. I wanted a way to quickly and easily add a read more link that could show and hide content without too much hassle.
The solution I settled on works by adding the class read-more
to the element that should be toggled.
Demo
1. Create your layout
![Create your layout](https://images.tango.us/workflows/9d5d248a-58a2-4d6b-8e81-29197f7928b1/steps/141edec1-11d7-4621-b01c-33f5c0a312df/0ccea15c-88c4-41c2-be8c-232010ddc112.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8)
2. Add your block and target class
You can use any block that you wish. For multiple blocks, wrap it in some sort of container. I am using the container block from GenerateBlocks.
Add the class read-more
to your block.
![Add your block and target class](https://images.tango.us/workflows/9d5d248a-58a2-4d6b-8e81-29197f7928b1/steps/2734a57e-056e-491c-8899-cd219227cc80/c2e8a9a4-3608-49c2-9402-1aacb33e5c96.webp?fm=png&crop=focalpoint&fit=crop&fp-x=0.9017&fp-y=0.7486&fp-z=2.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8)
3. Changing the button text
If you want to change the button text, you need to add the data attributes data-more
and data-less
If they are left empty or don’t exist, it will default to Read more
and Read less
![Changing the button text](https://images.tango.us/workflows/9d5d248a-58a2-4d6b-8e81-29197f7928b1/steps/e0d7dfbd-239f-414d-8d4b-e0a139d17af6/d11236f7-b421-41d5-97a7-6c7f06522c18.webp?fm=png&crop=focalpoint&fit=crop&fp-x=0.8891&fp-y=0.8562&fp-z=2.0000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8)
4. Add the code
Add the code below to functions.php
or code snippet plugin. You can modify the defaults at the top of the function. The $target_class
is the class we added in step 2.