An Easy Guide to JQuery Show/Hide
No Comments
Written by Anders on April 2, 2009 – 2:53 am
A couple weeks ago, I was looking for some help with a particular JQuery project only to find that out of every resource I checked, not one was east to understand or include complete source files. Today, I’m going to teach you how to build a simple JQuery header that you can show or hide with the click of a button. There’s many different ways to do this and many options you can choose, but I’m going to show you just one. I’ve included all the source files at the end of this lesson but I’ll go over the major parts with you.
Start with your standard HTML page, make sure you have a head, body etc. I won’t spend any time on this part as you should be able to do this.
Next, you need to link to the JQuery library that you will be using.
I’ve included one with the source files, but you can also download the latest at http://jquery.com/.
<script src="the-location-of-your-jquery-library" type="text/javascript"></script>
If you don’t add the JQuery link, your code will not work.
Next, we have 3 parts. The JQuery, the CSS, and the HTML. The JQuery and CSS need to go inbetween your tags, while the HTML goes within the body.
The JQuery:
<script type="text/javascript"><!-- // initialize the jquery code $(document).ready(function(){ //close all the content divs on page load $('.mover').hide(); // toggle slide $('#slideToggle').click(function(){ // by calling sibling, we can use same div for all demos $(this).siblings('.mover').slideToggle(); }); }); // --></script>
The CSS:
<style type="text/css">
/* normalize margin, padding */
html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, input,
p, blockquote, th, td, img {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
/* normalize font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
/* remove list-style from lists */
ol, ul {
list-style: none;
}
/* normalize font-style and font-weight to normal */
address, caption, cite, code, dfn,
th, var {
font-style: normal;
font-weight: normal;
}
/* remove table border spacing */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* remove border from fieldset and img */
fieldset, img {
border: 0;
}
.container .pusher{
cursor:pointer;
padding:3px 10px 3px 7px;
font-weight:900;
font-size:14px;
margin:0;
}
.container .mover{
padding:3px 10px 3px 7px;
margin: 0;
}
.container {
background-color:#fff;
border-bottom:thin solid #333333;
}
</style>
The HTML:
<div class="container">
<div class="pusher" id="slideToggle">Show/Hide Container</div>
<div style="display: none;" class="mover">
<p>Here you can place any text, HTML, images or other code.
</p>
<img src="logo.png" /></div></div>
<div>
<p>Text or code placed here, will shift down below the opened container.</p>
</div>
Add these components to your page, and you will have a unique and easy JQuery slider.
Click here to download source files.
