JS 프레임워크/jQuery

[jQuery] toggle(토글) 복습

두리두리안 2021. 4. 14. 18:36 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
button{
	display:block;
	border: none;
	border-radius:10px;
	background-color: black;
	color: white;
	font-size:20px;
	padding: 10px 20px;
	margin: 10px; 
}
button:hover{
	background-color: gray;
}

</style>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("button").click(function() {
			$(this).next().toggle(1000, function() {
				alert("ok");
			});
		});
	});
	
</script>
</head>
<body>
	<button>Open & Close</button>
	<div>
		<h1>HTML5 Tutorial</h1>
		<p>With HTML you can create your own Website.
			This tutorial teaches you everything about HTML.
			HTML is easy to learn - You will enjoy it.</p>
	</div>
	<button>Open & Close</button>
	<div>
		<h1>Examples in Every Chapter</h1>
		<p>This HTML tutorial contains hundreds of HTML examples.With our online HTML editor, you can edit the HTML, and click on a button to view the result.</p>
	</div>
	
</body>
</html>

1)

2)

3)