slideToggle method in jQuery
The next method - slideToggle works like this: if the element is hidden - it shows it, and if it is shown - it hides it. The convenience of this method is that all this can be hung on one button, and not on two, as it was in the previous lessons.
Let's look at the following example. Let's say our HTML code looks like this:
<button id="toggle">click me</button>
<div id="elem">text...</div>
There is also CSS:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Now let's write some code so that when you click on one button, the element is hidden and then shown:
$('#toggle').click(function() {
$('#elem').slideToggle(1000);
});