This is a function that slowly hides content when you click a button, changes the value of the button from "Hide" to "Show", then slowly shows content when the button is clicked again. You'll need to create 3 files: an HTML file, a .css, and a .js Note the names of the .css files and .js files at the bottom of the HTML. Have fun playing around with the properties to give it some color or move things around.
Let's start with the HTML:
Next, some CSS formatting with a stylesheet:
Then, the jQuery:
Let's start with the HTML:
Code:
<html>
<head>
<title>
Toggle Button Example
</title>
<link href="togglebutton.css" type="text/css" rel="stylesheet">
</head>
<body id="public">
<div>
<!-- Body Header -->
<div id="header">
<h1>
This is the Header. It can also be a logo.
</h1>
<p>Here is some text in the header! Click the "Hide" button to hide this, along with the header and the footer.
</p>
</div>
<!-- Body Content -->
<div id="content">
<input type="button" value="Hide" id="toggleButton" style="float:right;">
<h2>
Content Header
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- Footer -->
<div id="footer">
This is the footer! This toggles too!
</div>
</div>
<script src="libs/jquery-1.4.4.js"></script>
<script src="hideshow.js"></script>
</body>
</html>
Next, some CSS formatting with a stylesheet:
Code:
body {
background-color: #CCCCCC;
color: #333333;
font-family: sans-serif;
font-size: 1em;
line-height: 1.65;
}
#content {
background-color: #FFFFFF;
border-color: transparent;
-moz-box-shadow: 5px 7px 7px rgba(194, 194, 194, 0.3);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-width: 1px;
float: left;
min-height: 250px;
padding: 2%;
width: 50%;
}
#content h2 {
color: #666666;
font-weight: normal;
}
#footer {
float: left;
padding: 18px;
width: 64%;
}
Then, the jQuery:
Code:
$(function() {
$('#toggleButton').click( function() {
$('#header').toggle('5000');
$('#footer').toggle('5000', function(){
if ($('#header').is(':visible')) {
$('#toggleButton').val('Hide')
} else {
$('#toggleButton').val('Show')
}
});
});
});
