Home > User Guide

SliceMaker Tutorial: Show or Hide DIV when onClick



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

When your mouse clicks the telephone icon for the first time, the hidden contents will be shown;

When your mouse clicks the telephone icon again, the contents will be hidden again;

 

 

 [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 (Optional) 

 

If you want the contents to be hidden the moment the above demo page is loaded, you can choose to hide the contents. On the other hand, if you don't want the contents to be hidden the moment the above demo page is loaded, you can ignore this setting. 

Like the picture shown below, we should firstly select the slice that contains 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 hide or show the contents by clicking 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, we can hide or show the contents by hovering over the telephone icon.
2) If you choose onMouseOut event, we can hide or show the contents by moving away our mouse from the telephone icon.



 Step 4: Hide or Show the Contents

 

4-1: Click the 'Switch to Display or Hide Layer' button (Like the picture show below)


4-2: Select the Slice that Contains the Contents

After clicking the 'Switch to Display or Hide Layer' button, a dialog box will appear to ask us to select a slice that contains the contents.

Because No.3 slice contains the contents, so we should select the No.3 slice to hide or show 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