Home > User Guide

How to Hide Contents when onClick, onMouseOver or onMouseout?

 How to Hide Contents when onClick, onMouseOver or onMouseout?

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


When your mouse clicks the close icon, then all the contents that are shown will disappear.


                                                                               [View the demo]                                  [Download the Demo]


 The following passage will teach you how to hide contents using SliceMaker products.





 Step 1: Select a Slice to Trigger the onClick Event


To hide the contents, we should firstly select a slice to trigger the onClick event. For example, if we want to hide the contents when we click the 'Close' icon - , we should select the slice that contains the 'close' icon to the trigger the onClick event. Of course, you can select other slices to trigger the onClick event, it is your choice. 



Note: Here, we select the No.4 slice to trigger the onClick event because it contains the 'Close' icon.




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

Here we will choose onClick event.




1) If you choose onMouseOver Event, the contents will disappear when your mouse hovers over the close icon;

2) If you choose onMouseOut Event, the contents will disappear when your mouse moves away from the close icon.



 Step 3: Click the Add Button to Choose the Corresponding JavaScript Effect






 Step 4: Click the JavaScript Effect Button You have Chosen

After clicking the JavaScript Effect button -  , a dialog box will appear asking us to select another slice that will be hidden when we click the No. 4 slice.


Here, we will select No. 1 slice because No.1 slice contains all the contents, so we can hide all the contents after clicking No.4 slice.






 Step 5: Generate the Project


 After doing the above settings, please simply click the generate button to see the result.



After generating the project, you will immediately view the above result through the built-in previewer of SliceMaker products.




 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




Whats Next:

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.
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
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.