The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

jQuery Sliding Panel

  • # November 14, 2011 at 9:25 pm

    Dear Forums,

    I ran into a problem with some panels I started working on.

    I uploaded the files on my site, The problem is explained on the page itself:

    Please let me know if you guys have any suggestions.

    I don’t have the brain power to try to figure this out right now,
    any help would be awesome.


    # November 15, 2011 at 4:20 am

    This reply has been reported for inappropriate content.

    When the click event occurs you can set the z-index of the panel container…You would need to make sure that each button would change the z-index for both panels so one does not always stay on top but that is accomplished like so:

    # November 15, 2011 at 11:50 am

    I don’t have the answer for you (hopefully the post above does the job), but I just wanted to say how much I enjoyed reading “Dear Forums,” – a nice start to my day!

    # November 15, 2011 at 8:49 pm

    This reply has been reported for inappropriate content.

    hey forums,

    i updated the z-index issue. but im still not really there yet…….

    i included a link to a site that kinda does what im looking for:

    thanks to any1 looking into this with me

    # November 16, 2011 at 8:13 am


    I am working on something similar and has gotten it almost done. Here is the code:

    $(document).ready(function(){ // when the document finishes loading
    $('.yourFirstButton').click(function() { // when clicking your first tab button

    $('.slide_box').animate({ // animate the coming in box by
    'left':'0px'},500); // moving it to position left:0px; (which implies it being
    // position:absolute; left:big value to hide it; in your css)

    $('.initialDiv').hide('slow'); //at the same time start to hide the box that is class="initialDiv"



    $(document).ready(function(){ // when the document finishes loading
    $('.back_button').click(function() { // when the element with
    // class="back_button" is clicked

    $('.initialDiv').show('slow'); // show element with class="initialDiv"

    $('.slide_box').animate({ // at the same time move the top box to
    'left':'800px'},500); // position left:800px; with speed 0.5s.

    This works for me, but it does not slide out the lower div, but rather hides it. I tried animating it, but it doesn’t work. if you find a solution, please share.

    # November 16, 2011 at 10:08 am

    I messed around with this to make the panel come to the front when it was already open but the coding just got really messy – trying to take into account that other panels were open then making the active one come to the front.

    I ended up just closing all non-active panels. Oh and it is not recommended to start out an ID with a number, so I added a “p” in front. Here is a demo of what I got working, and the code I used:

    $(function() {

    var nav = $('ul#nav li a'); {
    var target = $($(this).attr('href') + '-page');
    return false;

    $(".page button").click(function() {

    # November 16, 2011 at 4:53 pm

    This reply has been reported for inappropriate content.

    Nice. Thanks dudes.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed