This tutorial explains how you can create a read more button that does not go to another page, but dynamically make more text visible on the current page.
To see the end result for this tutorial, visit the tutorial demo:
The first step is to add a button to the website visitors can click on if they want to read more. To add a button:
More detailed description of how to add items to your website in de manual on adding items to your website.
Now click on the new button to edit it. Click on the properties button. Change the URL to # (see image). By setting the URL to # you are telling the browser to stay on this page when clicked.
More on editing properties of an element in the manual on editting properties.
Now we add the text we would like to show when the button is clicked. The proces is similar to adding a button, but now we select the "formatted text" element from the category "content".
Add the text on the position you would like it to appear when the button is clicked.
While you sill have the text selected (or select it again) click on the visibility tab. Now select the "hide for action" option (see image). This tells the website to hide the text, but make sure it can be made visible again when targeted by an action. When you click on this option the text will dissapear from the page.
More on setting the visibility of an element in the manual on the visiblity tab.
All that is left is to set the action which makes the text reapear. To do this:
Save the action and your done. Now log out of the front-end editor to test your new creation.