LeeTee LeeTee - 1 month ago 13
jQuery Question

jquery toggle slide from left to right and back

I have a "Menu" button on the left hand side of the page and once selected I have a div containing the menu items show. I then have another button that can be selected to hide the menu.

Ideally I want this to slide out (from left to right) and back but have been unsuccessful in getting this working well. I have tried using animate and SlideToggle but none work well for what I have. Any tips?

<div id="cat_icon">Menu</div>
<div id="categories">
<div CLASS="panel_title">Menu</div>
<div CLASS="panel_item">
<template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" />
</div>
</div>


$('#cat_icon').click(function () {
$('#categories').toggle();
$('#cat_icon').hide();
});
$('.panel_title').click(function () {
$('#categories').toggle();
$('#cat_icon').show();
});

Answer

See this: Demo

$('#cat_icon,.panel_title').click(function () {
   $('#categories,#cat_icon').stop().slideToggle('slow');
});

Update : To slide from left to right: Demo2

Note: Second one uses jquery-ui also

Comments