jQuery hide and show methods

Effects allow you to animate an element, for example, to smoothly hide or show it. There are jQuery methods for each effect. Let's start with the hide and show methods. The hide and show methods allow you to hide and show elements. Let's look at how they work.

Let's start with the following HTML code:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>

CSS the code looks like this:

#elem {
	padding: 10px;
	width: 150px;
	height: 150px;
	border: 1px solid green;
	margin-top: 10px;
}

Now let's write Javascript code, according to which, when you click on the #hide button, the element will be hidden, and when you click on #show, it will be shown:

$('#hide').click(function() {
	$('#elem').hide();
});

$('#show').click(function() {
	$('#elem').show();
});

You can set the effect execution time in milliseconds (1000 milliseconds = 1 second). In this case, the effect will play smoothly for the specified time. Let's set the effect execution time to 1 second and see how the effect changes:

$('#hide').click(function() {
	$('#elem').hide(1000);
});

$('#show').click(function() {
	$('#elem').show(1000);
});

This is the layout:

<p>
	<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
	<ol>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
	</ol>
</div>

body {
	font-size: 18px;
}
a {
	color: blue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ol {
	margin: 0px;
	padding-left: 10px;
}
li {
	list-style-type: inside;
}
div {
	display: inline-block;
	padding: 30px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Make it so that when you click a link with #hide, the div containing the list is hidden, and when you click a link with #show, it is shown. Set the execution time for each effect to 600ms.