Jam's story

[JavaScript] 버튼누르면 보이게 하기 본문

WEB/JavaScript

[JavaScript] 버튼누르면 보이게 하기

애플쩀 2022. 5. 23. 12:48 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#panel, .flip{
font-size:16px;
padding:10px;
background-color: #4acf50;
color:white;
text-align: center;
margin:auto;
border:1px solid #a6d8a8;
}
#panel{
display:none;
}
</style>
</head>
<body>
<!-- p.filp>{Click to show panel }^#panel>p*3>lorem -->
<p class="flip">Click to show panel </p>
<div id="panel">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam necessitatibus dignissimos culpa quibusdam placeat quas officiis aspernatur dolore laudantium aperiam doloremque magni. Eaque beatae vero fugit? Architecto in ea.</p>
	<p>Amet et omnis iste nulla beatae possimus voluptate facilis ipsum sint ducimus eius ad harum eaque neque deleniti quasi tempora voluptas eum accusantium suscipit in laborum ullam inventore! Iusto ipsum!</p>
	<p>Nihil totam temporibus architecto mollitia earum maiores reiciendis quaerat quis sequi laudantium fugit ducimus quod soluta quo cum suscipit inventore incidunt quasi quia ab. Iure esse eveniet saepe perspiciatis error.</p>
</div>
<script type="text/javascript">
document.querySelector(".flip").onclick = (function() {
    document.getElementById("panel").style.display="block";
});
</script>

</body>
</html>
Insert title here

Click to show panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam necessitatibus dignissimos culpa quibusdam placeat quas officiis aspernatur dolore laudantium aperiam doloremque magni. Eaque beatae vero fugit? Architecto in ea.

Amet et omnis iste nulla beatae possimus voluptate facilis ipsum sint ducimus eius ad harum eaque neque deleniti quasi tempora voluptas eum accusantium suscipit in laborum ullam inventore! Iusto ipsum!

Nihil totam temporibus architecto mollitia earum maiores reiciendis quaerat quis sequi laudantium fugit ducimus quod soluta quo cum suscipit inventore incidunt quasi quia ab. Iure esse eveniet saepe perspiciatis error.

 

강사님코드 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#panel, .flip{
font-size:16px;
padding:10px;
background-color: #4acf50;
color:white;
text-align: center;
margin:auto;
border:1px solid #a6d8a8;
}
#panel{
display:none;
}
</style>
</head>
<body>
<!-- p.filp>{Click to show panel }^#panel>p*3>lorem -->
<p class="flip">Click to show panel </p>
<div id="panel">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsam necessitatibus dignissimos culpa quibusdam placeat quas officiis aspernatur dolore laudantium aperiam doloremque magni. Eaque beatae vero fugit? Architecto in ea.</p>
	<p>Amet et omnis iste nulla beatae possimus voluptate facilis ipsum sint ducimus eius ad harum eaque neque deleniti quasi tempora voluptas eum accusantium suscipit in laborum ullam inventore! Iusto ipsum!</p>
	<p>Nihil totam temporibus architecto mollitia earum maiores reiciendis quaerat quis sequi laudantium fugit ducimus quod soluta quo cum suscipit inventore incidunt quasi quia ab. Iure esse eveniet saepe perspiciatis error.</p>
</div>
<script type="text/javascript">

document.querySelector(".flip").onclick = (function() {
    var panelDisplayValue=document.getElementById("panel").style.display;
    if(panelDisplayValue=="" || panelDisplayValue=="none"){
    	document.getElementById("panel").style.display="block";
    }else{
    	document.getElementById("panel").style.display="none";
    }
});

var sw=true;
document.querySelector(".flip").onclick = (function() {
    var panelDisplayValue=document.getElementById("panel").style.display;

	document.getElementById("panel").style.display=sw? "block":"none";
});
</script>

</body>
</html>
저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] 배경색바꾸기  (0) 2022.05.25
[JS] 의사클래스 풍선도움말  (0) 2022.05.24
[JS][Jquery] 스크립트를 이용해서 동적인 버튼 만들기 +버튼 누르면 버튼10개 생성  (0) 2022.05.23
[JavaScript] 모든 a 링크 태그의 active 속성 제거 , 클릭한 것만 주기  (0) 2022.05.23
[javascript] 스크롤 올리기  (0) 2022.05.20
'WEB/JavaScript' Related Articles more
Comments