Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy jquery sliding panel menu problem

    There is a simple solution to this, I however have not been able to execute it correctly.

    I have a top level navigation (that is dynamically populated) that when clicked reveals a hidden panel. This works. The problem is when another menu item is clicked, that panel is stacked on any panels that are already open. How do I close any open panels first before opening another one.

    Below is my code:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".page-item-4").click(function(){
    $("#slide-panel-photo").slideToggle("slow");
    });
    $(".page-item-6").click(function(){
    $("#slide-panel-video").slideToggle("slow");
    });
    });
    </script>
    You can see the (barely there) work in progress here http://www.jessicabo.com/max01/

    Any help is greatly appreciated

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You could add an additional couple of lines to hide the other panel, and use the callback on the hide to call the slideToggle:

    Code:
    $(document).ready(function(){
    $(".page-item-4").click(function(){
    	$("#slide-panel-video").slideUp('slow',function(){
    		$("#slide-panel-photo").slideToggle("slow");
    	});
    });
    $(".page-item-6").click(function(){
    	$("#slide-panel-photo").slideUp('slow',function(){
    		$("#slide-panel-video").slideToggle("slow");
    	});
    });
    });
    This is OK if you've just got a couple of panels, as now, but will quickly get tedious with any more.

    If you do intend to have more than one I'd redo your html so that the lists within the sidepanel are nested within the top level lists - so it becomes more like a standard drop down menu, then add some jQuery for the animation - it'll take a bit more effort initially but might be easier in the long term.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •