Dawn Anthes

Hi, my name is Dawn Anthes

I’m a web designer with nearly 10 years of experience designing and coding custom websites. I am a creative designer and experienced html/css coder and have additional experience with javascript and asp. I am proficient in the usual tools of the trade (Photoshop, Illustrator, Dreamweaver, and Flash), and am constantly expanding my realm of expertise by exploring different tools and methods of website creation.

Portfolio Resources Art

Resources: Sliding Top Panels with jQuery

Panels that can be shown or hidden with the click of the mouse allow for extra functionality to be added to a page, without taking up valuable screen real estate. Also, extra information or functionality can be made avaialable to the user without forcing them to navigate away from the page they are on. jQuery allows us to easy show and hide extra panels of information with a slick and stylish animation.

Example

Slide Panel | Slide Panel2

Implementation

First, add the jQuery script library to your website if it isn't already there. You can find out more about jQuery and how to add it to your website at http://jquery.com/.

Next, create a new javascript file to hold the jquery code that makes the sliding panel work. Add the following code:

$(document).ready(function(){ //this function makes the javascript inside of it not run until the page is fully loaded


// function for 1st panel
$(".btn-slide").click(function(){ // when anything with a class of "btn-slide" is clicked this function runs

$("#panel").slideToggle("slow"); // looks for the div with ID of "panel" and runs the slide animation (changes height from 0 to set value)
// as the name implies it is a toggle, if the panel is open it closes it, if it's closed it opens it

if ($("#panel2").is(":hidden")) { // this boolean statement checks to see if the second panel "panel2" is currently not visible,
} else { // if it is not visible then it does nothing
$("#panel2").slideToggle("slow"); // if "panel2" is visible then it hides since we don't want both panels to display at the same time
}

});

// function for 2nd panel
$(".btn-slide1").click(function(){
$("#panel2").slideToggle("slow");
if ($("#panel").is(":hidden")) {
} else {
$("#panel").slideToggle("slow");
}
});

// If you need to add more panels then you'll need to
// create a separate function for each new panel.
// You'll also need to add additional boolean statements
// to each existing function to check each panel to see if
// it needs to be closed when the new panel is being opened.

});

Then, create the divs for your two slide down panels with IDs of "panel" and "panel2" on the page you want the panels to appear on. Put your content in the panels.

<div id="panel">
<h2>Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id laoreet sem. Pellentesque sit amet velit erat, ut venenatis nisi. Donec fringilla sodales bibendum. Sed condimentum feugiat odio varius eleifend. Suspendisse potenti. Morbi pellentesque luctus urna eu ultricies. Proin condimentum mattis enim quis porta. Cras a augue id lorem venenatis auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sem est, pulvinar ac feugiat in, molestie vel sapien. Suspendisse tincidunt laoreet purus, sed molestie lectus malesuada non. Sed lacus nulla, cursus fringilla semper vel, posuere id leo. Sed eget luctus felis. </p>
<a href="#top" class="btn-slide1">Show Slide Panel 2</a> | <a href="#top" class="btn-slide">Close Panel</a>
</div>

<div id="panel2">
<h2>Panel 2</h2>
<p>Vivamus porttitor enim ac urna molestie luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin porta felis ac erat aliquet eget venenatis massa semper. Cras in ipsum eros, et molestie urna. Mauris ornare nunc vel quam molestie egestas consectetur velit faucibus. Mauris ultricies imperdiet risus. Maecenas sollicitudin tristique tellus a auctor. Sed scelerisque rutrum mi in sagittis. Mauris bibendum tellus quis nisi pretium ultricies et eget leo. Nam rhoncus dignissim nulla, vel hendrerit felis porta in. Aliquam feugiat accumsan egestas. </p>
<a href="#top" class="btn-slide">Show Slide Panel 1</a> | <a href="#top" class="btn-slide1">Close Panel</a>
</div>


Finally, you'll need to add the CSS. Add the following code to your site's css document:

/* classes for sliding panels */

/* styles the first sliding panel */
#panel {
padding: 20px;
background: #c4dce8;
width: 200px;
height: auto;
display: none;
position: absolute;
top: 0px;
left: 0px;
color: #001c2a;
z-index: 50;
margin: 0px;
}

/* styles the second sliding panel */
#panel2 {
padding: 20px;
background: #ebd6ac;
color: #000000;
height: 200px;
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 50;
margin: 0px;
}

/*
These are the classes that trigger the panels.
You can leave them off the stylesheet if you don't need to style them.
I've included them here for reference.
*/
.btn-slide {} /* first panel link */
.btn-slide1 {} /* 2nd panel link */


Try playing around with the different values to see what kind of looks you can get.