The Hidden Layer
Create a CSS style for your layer and set the “display” to “none”, e.g.:
/* style for the hidden layer */
#myHiddenLayer {
display: none;
padding: 10px;
border: 1px solid #ccc;
background: #f0f0f0;
}
/* style for the close button, inside the hidden layer */
.close {
float: right;
background:url(close.gif) no-repeat;
width: 20px;
height: 20px;
}
JQuery
Add a link to the JQuery file
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
The function
Add a function to toggle the layer visibility:
<script type="text/javascript">
$(function(){
$("#openMyHiddenLayer").click(function(event) {
event.preventDefault();
$("#myHiddenLayer").slideToggle();
});
$("#myHiddenLayer a").click(function(event) {
event.preventDefault();
$("#myHiddenLayer").slideUp();
});
});
</script>
Add the HTML layer to the page
<div id="myHiddenLayer">
<a href="#" class="close"> </a>
<p>Content of a Div Toggle</p>
</div>
Add the link to toggle the layer visibility
<p id="openMyHiddenLayer">click here to show/hide the layer</p>
Explanation
$("#openMyHiddenLayer").click(function(event) {
This function should run when the user clicks on the element on the page with the id (#) openMyHiddenLayer.
event.preventDefault();
If this method is called, the default action of the event will not be triggered. Click here for more information.
$("#myHiddenLayer").slideToggle();
The function should toggle the layer visibility after the user clicks on the element on the page.
Demonstration
click here to show/hide the layer