How to create read more read less button in WordPress

Create the read more and read less button in WordPress

If you are looking for a solution for showing and hiding content in WordPress without refreshing the page then here I have given an easy solution for you. Because here we are going to see how to create a read more and read less button in WordPress without using plugins. Most beginners are confused about creating a read more read less button for WordPress. Many times we insert lots of content in our WordPress website and due to the large content users avoid reading all content or escape from the website, therefore, we want to need to use the expand/collapse button to hide and show content in WordPress.

Before start to the post, I notify you if you are an advanced WordPress developer then please avoid this post because maybe you already know about WordPress and read more than expand without plugins. So, this post is only for beginners or who are interested to learn about WordPress web design. For creating WordPress read more read less button here we do not use any type of plugin, but here we want to insert the JavaScript coding so that we want to need to install any JavaScript inserting WordPress plugin.

If you get the proper knowledge about expand/collapse button then you can also design the FAQ in WordPress. For providing you easy WordPress tips and tricks we are always ready here. If you want to see our previous post then you can check here. How to create a link for a phone number in WordPress. Otherwise, you can also join our YouTube channel.

If you have any difficulty creating expand and collapse button in WordPress by using the coding then you can directly use WordPress read more expand plugin. So, without wasting time let’s start with the creating read more button without refreshing the page in WordPress. Below I have given some steps for reading more read less toggle, just follow the following steps.

Steps for creating a read more read less button in WordPress

1. First open your WordPress website dashboard

2. Then install the ‘script n style’ plugin

3. After that write this code in CSS section --> #more {display: none;}

4. Then write below source code in the javascript section

5. Then open your web page where you want to use the read more and read less button

6. Then use ‘less button id’ in the span tag to hide content

7. After that use ‘more button id’ in the span tag to show more content

8. Then save and update the web page.

Source code for create read more and read less button in WordPress

function myFunction() {

  var dots = document.getElementById("less");

  var moreText = document.getElementById("more");

  var btnText = document.getElementById("myBtn");

 

  if (dots.style.display === "none") {

    dots.style.display = "inline";

    btnText.innerHTML = "Read more";

    moreText.style.display = "none";

  } else {

    dots.style.display = "none";

    btnText.innerHTML = "Read less";

    moreText.style.display = "inline";

  }

}

Why do we need to create a read more read less button in WordPress

The main and best example of creating expand/collapse button is that when we are used a large amount of content on our website then by using the read more and read less button we can hide and show the content on our website. Sometimes we are creating the read more button in WordPress but after clicking that button redirect to the other page or the same page therefore we are finding the solution for the show and hiding content in WordPress without refreshing the page. Now that is possible also in WordPress.

For creating the read more and read less toggle button in WordPress we need some JavaScript and CSS coding by using that coding you can easily create a read more button and read less button without refreshing the web page. If you have don’t any knowledge about JavaScript and CSS coding then don’t worry I will provide you free source code for reading more read-less buttons in WordPress. Most of the time students are searching how to change the read more text in WordPress then I told you that think, here we are not changing the text of the read more button, if you want a solution for changing the read more buttons text in WordPress then comment me I will provide a solution for you.

Due to the read more and read less button, users can easily interact with your website and only those peoples who read the more information are interested in knowing about your website. So that, you can send the proper information to the proper person. The most use of seeing more see less button in the blogging section. When you create the blogging section and want to show your content quickly without refreshing the page, you can create a see more see less button in WordPress.

If you are looking for the read more read less WordPress plugin then I already told you if you are using the plugins for making a show and hiding content in WordPress without refreshing the page then many times plugins are not working properly and many times some plugins do not provide the all features free if you want to customize the read more and read less button then you must upgrade the plugin otherwise you cannot make more customization. Rather than if you are using this solution I mean you are using custom coding for making read more read less toggle button in WordPress then you can customize that that as you want.

Then also you are interested in using the plugin to create see more see less plugin then you can also search online for how to use read more without a refreshing the plugin. In many plugins, you can’t change the read more option so maybe you can also create a new query like how to change read more text in WordPress. Due to that use the custom coding to create a read more read less button in WordPress.

I hope you understood the proper to create expand/collapse button in WordPress. If you have any queries regarding WordPress read more buttons without refreshing then you can comment to me, I will try to solve your problem. For more information, you can see this solution in a video on YouTube.