[Javascript] 글 숨기기 / 보이기

티스토리 뷰

WEB/자바스크립트

[Javascript] 글 숨기기 / 보이기

춘햄 2021. 5. 12. 17:10

이것은 접은 글 입니다.

위와 같이 자바스크립트를 활용하여 글이나 이미지 등을 클릭했을 때만 보이게할 수도 있다.

간단하게 hideDetail, showDetail 함수를 각각 작성하여 버튼의 onclick에서 호출해주기만 하면 된다.

◎event.css

#item {
	position:relative;
	width:500px;
	height:auto;
	padding:15px 20px;
	margin:auto;
}
button {
	background-color:rgba(255,255,255,0.7);;
	padding:5px;
	border:1px solid #ccc;
	font-size:0.8em;			
}
.over {
	position:absolute; /*이와 같이 절대 좌표로 버튼을 이미지 위에 띄울 수 있다.*/
	left:30px;
	bottom:30px;
}
.detail {
	width:400px;
	text-align:left;			
	line-height:1.8;
	display:none;
}
#cover { border: 5px solid transparent;}

◎event.js

function showDetail() {
	document.querySelector("#desc").style.display = "block";
	document.querySelector("#open").style.display = "none";
}

function hideDetail() {
	document.querySelector("#desc").style.display = "none";
	document.querySelector("#open").style.display = "block";
}

◎event.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Event</title>
	<link rel = "stylesheet" href = "css/event.css">
</head>
<body>
	<div id = "item">
		<img src = "images/flower1.jpg"/>
		<button class = "over" id = "open" onclick = "showDetail()">상세설명보기</button>
		
		<div id = "desc" class = "detail">
			<h4>민들레</h4>
			<p>민들레는 민들레이다.</p>
			<button id = "close" onclick = "hideDetail()">상세설명닫기</button>
		</div>
	</div>
	<script src = "js/event.js"></script>
</body>
</html>

'WEB > 자바스크립트' 카테고리의 다른 글

[Javascript] 객체의 생성자 선언 (0)	2021.05.13
[Javascript] 객체 생성 & 활용 기초 (0)	2021.05.13
[Javascript] 제어문 (0)	2021.05.12
[Javascript] 입력창 prompt 를 이용한 나이 계산 (0)	2021.05.12
[Javascript] Date를 이용한 현재 시간 출력 (0)	2021.05.12