Slide Panel in Jquery

Jquery Examples Add comments | 2,688 views |

Description:

Here You’ve probably seen a Slide Panel Example, when you click on a button and a panel slide up/down. It is very easy just do it..

Script Code

Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
 <mce:script type=”text/javascript” src=”jquery.js” mce_src=”jquery.js”></mce:script> <mce:script type=”text/javascript”><!– var $ =jQuery.noConflict(); $(document).ready(function(){ $(”.btn-slide”).click(function(){ $(”#panel”).slideToggle(”slow”); $(this).toggleClass(”active”); return false; });}); // –></mce:script>

The above references an jquery.js file. Download jquery.js (by right clicking, and selecting “Save As”),

and upload to your webpage directory. Within the above code

CSS Code:

Step 2: Insert the below into the <HEAD> section of your page: (Select to copy)
 <mce:style type=”text/css”><!– body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif;} a:focus { outline: none;} #panel { background: #F0FEDC; height: 200px; display: none;} #panel h2, p{margin:0px; padding:0px; padding-top:20px; padding-left:20px; color:#666} .slide { margin: 0; padding: 0; border-top: solid 4px #8EC248; background: url(images/btn-slide.gif) no-repeat center top;} .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none;} .active { background-position: right 12px;} –></mce:style><style type=”text/css” mce_bogus=”1″> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif;} a:focus { outline: none;} #panel { background: #F0FEDC; height: 200px; display: none;} #panel h2, p{margin:0px; padding:0px; padding-top:20px; padding-left:20px; color:#666} .slide { margin: 0; padding: 0; border-top: solid 4px #8EC248; background: url(images/btn-slide.gif) no-repeat center top;} .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none;} .active { background-position: right 12px;}</style>

HTML Code:

Step 3: Insert the below into the <BODY> section of your page: (Select to copy)
 <div id=”panel”> <h2>Slide Panel Heading</h2> This is Jquery Example of Slide Panel. sample text(One of the most significant elements of a good user interface is visibility of the system’s status. Users must notice immediately what’s going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course),) visit more examples: <a href=”http://www.csscody.com” mce_href=”http://www.csscody.com” style=”color:#4C6E1E” mce_style=”color:#4C6E1E”>www.csscody.com</a> </div> <a href=”#” mce_href=”#” class=”btn-slide”>Slide Panel</a>

Got a question or need help customizing this Jquery code? Post it in the help me. If you have a comment or suggestion instead, post it in the comments section below.

Tags: CSS, javascript, Jquery

9 Responses to “Slide Panel in Jquery”

1. Jon Says:
January 21st, 2009 at 8:59 pm
Thanks for tutorial.
It’s a very quick start guide for jqueryframework.I will begin using jquery with your tutorial
Faithfully
2. Jon Says:
January 21st, 2009 at 9:00 pm
quiet interesting demo
3. Jon Says:
January 21st, 2009 at 9:01 pm
This is the best tutoial I’ve seen. Thanks
4. steve Says:
February 3rd, 2009 at 9:16 pm
Excellent article, found it through feedly´s twitter.

Thanks
5. Stéphane Says:
February 9th, 2009 at 3:27 am
Is there a way to make that panel slide over the content of page instead of pushing it ? I tried with z-index without success…
Thanks.
6. mark Says:
February 19th, 2009 at 1:08 am
i got working beautifully, however i have 2 questions:

1. how do i set it up be open by default?
2. cookie so user dont have to open/close each page refresh..

thx
7. ash Says:
May 8th, 2009 at 10:26 pm
hi how are you love this tutorial i was wondering if its possible to help me place the slide at the bottom and open up from the bottom up instead… I would really appreciate your help.
Thanks in advance
8. ash Says:
May 8th, 2009 at 10:27 pm
Hi how are you, I love your tutorial i was wondering if its possible to place the slider on the bottom of my page so that it opens up from the bottom not the top, thanks a million.
9. ash Says:
May 8th, 2009 at 10:35 pm
Hey how are you i was wondering if you could help me place this at the bottom of my page so that it slides up, i would really appreciate the help

thanks a million