다연이네

[days03] 토글 버튼 본문

Web/HTML

[days03] 토글 버튼

　다연　 2020. 12. 2. 19:30
반응형

토글 버튼을 누르면 해당 내용이 출력되도록 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- button*3>{토글버튼-$} -->
<button>토글버튼-1</button>
<div style="background-color: tomato; color: white; border: 1px solid red; padding: 20px"> 
	<h3>제목</h3>
	<p>내용</p>
</div>
<br>
<button>토글버튼-2</button>
<div style="background-color: tomato; color: white; border: 1px solid red; padding: 20px">
<h3>제목</h3>
	<p>내용</p>
	</div>
	<br>
<button>토글버튼-3</button>
<div style="background-color: tomato; color: white; border: 1px solid red; padding: 20px">
<h3>제목</h3>
	<p>내용</p>
	</div>
	<br>
	
	
<script>
$('div').hide();
/*  $('태그명')*/
$('button').click(function () {//button이라는 태그들을 찾아와서 click
	//console.log("버튼 클릭됨"); //f12눌러서 Console 확인해보기
	
	//$('div').show(); //전부 보여짐
	
	//$('div').slideToggle(); //전부 접었다 펼졌다
	
	$(this).next().slideToggle(); //버튼 뒤의 객체만 접었다 폈다
}) ;
</script>

</body>
</html>

버튼을 누르면 내용이 부드럽게 내려오고, 한번 더 누르면 부드럽게 올라간다.

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days03] html의 head의 자식 요소  (0) 2020.12.02
[days03] iframe  (0) 2020.12.02
[days03] 버튼 1. HTML 2. Javascript 3.JQuery  (0) 2020.12.02
[days03] 표 만들고 간단한 속성 넣기  (0) 2020.12.02
[days03] emmit 사용법  (0) 2020.12.02
'Web/HTML' Related Articles more
Comments