<html lang="ko">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>자바스크립트 이벤트</title>

<link rel="stylesheet" href="css/event.css">

<div id="item">

<img src="images/flower.jpg" alt="">

<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>

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"; // '상세 설명 보기' 단추를 화면에 표시

}

</script>