The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Sliding Panel

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #35166

    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.



    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!



    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.


    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() {

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.