Home > User Guide

How to Display Hidden Contents within a DIV when onClick?



 Below is the result we want to achieve through SliceMaker products:

When your mouse clicks the telephone icon, the hidden contents will appear:

 

 

 [View the demo]                  [Download the demo]


Now, I will show you how to achieve the above result with SliceMaker products.



 Step 1: Hide the Contents

To display the hidden contents when we click the telephone icon, the first step we should do is to hide the contents below the telephone icon.

Like the picture shown below, we should firstly select the slice that contain the contents and then click the 'Hide' radiobutton to hide the contents within the slice.



 Step 2: Select a Slice to Trigger the onClick Event

If we want to display the hidden contents when we click the 'telephone' icon, we should select the slice that contains the 'telephone' icon to the trigger the onClick event. Of course, you can select other slices to trigger the onClick event, it is your choice. 

According to the desired result, we should select No.2 slice that contains the telephone icon to trigger the onClick event. (Like the picture shown below)



 Step 3: Choose an Event - onClick, onMouseOver or onMouseOut

You can simply switch to the related tab to choose an event, like the picture shown below.

According to the desired result we want to achieve, we should select the 'onClick' event.

Note:

1) If you choose onMouseOver event, the hidden contents will be displayed when your mouse hovers over the telephone icon.
2) If you choose onMouseOut event, the hidden contents will be displayed when your mouse moves away from the telephone icon.



 Step 4: Display the Hidden Contents

Through the first step, we have hidden the contents within the No.3 slice. Now, let's choose to display it.


4-1: Click the 'Display Slice' button (Like the picture show below)


4-2: Select the Slice that Contains the Hidden Contents

After click the 'Display Slice' button, a dialog box will appear to ask us to select a slice that contains the hidden contents.

Because we have hidden the contents within the No.3 slice through the first step, so we should select the No.3 slice again to display the contents when onClick.



 Step 5: Generate and Preview

Through the above 4 steps, we have completed all the necessary settings. At last, you just need to click the generate button to see the result.



 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0