Let's start with the HTML:
<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:
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:
$(function() { $('#toggleButton').click( function() { $('#header').toggle('5000'); $('#footer').toggle('5000', function(){ if ($('#header').is(':visible')) { $('#toggleButton').val('Hide') } else { $('#toggleButton').val('Show') } }); }); });
Load the .html file in your browser and see what you've got!
No comments:
Post a Comment