Menu
I've got a div#items and if it's clicked then div#choices slideDown(). If it's clicked again then div#choices should slideUp(); How can I test if choices is down or up already? I know I could store in a variable and toggle it's value whenever div#items is clicked, but what if #choices has been slid down by other means?
928
The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.
toggle() changes from display:none to display:block , a property which is not animatable. Use toggleClass() to ...well...toggle :)/change classes on the menu and style those classes. So use left:-100% and left:200px ( if that is where you want to position the menu ) and together with transition or maybe opacity.
The task here is to create a slide left and right toggle effect in the JQuery, you can use the jQuery animate() method. . animate() method: It is used to change the CSS property to create the animated effect for the selected element.
The slideDown() Method in jQuery is used to check the visibility of selected elements or to show the hidden elements. It works on two types of hidden elements: Elements hidden using jQuery methods. Elements hidden using display: none in CSS.
Use .slideToggle()
197
As Marimuthu's answer points out, you can use slideToggle() to slide up if the div is already open, or down if it's closed.
You can also check the display property to find out if it's currently visible or not. From the jQuery docs for slideUp().
Once the height reaches 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.
Knowing this, you can check to see if it is set to "none":
var $choices = $('div#choices');
if ($choices.css("display") == "none")
$choices.slideDown();
else
$choices.slideUp();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
