Demo

To see the end result for this tutorial, visit the tutorial demo:

Add a button

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:

1. Click on the plus button in the left bottom corner
2. Open te category "navigation"
3. Click on the type of button you want to add (do not hold the button down)
4. Hover your mouse to the position you would like to add the button
5. Click

More detailed description of how to add items to your website in de manual on adding items to your website.

Disable the link

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.

Add text

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.

Hide the text

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.

Set the action

All that is left is to set the action which makes the text reapear. To do this:

• Select the button element
• Click on the actions tab
• Select as action "when clicked"
• Select as target the text element you've added
• Select as action "show/hide element"

Save the action and your done. Now log out of the front-end editor to test your new creation.