JavaScript 접었다 폈다하는 자바스크립트 소스

2019.01.28 19:20

접었다 폈다하는 자바스크립트 소스

<!DOCTYPE html>
	<head>
	<title>접었다 펼 수 있는 영역 만들기</title>
	<style>
	.label
	{
	width: 400px;
	margin: 10px 0 0 0;
	padding: 10px;
	background-color: #ccccff;
	text-align: center;
	border: 1px solid #ccccff;
	}
	.elements
	{
	border: 1px solid #ccccff;
	padding: 10px;
	border: 1px solid #ccccff;
	width: 400px;
	}
	button
	{
	margin: 20px;
	}
	</style>
	</head>
	<body>
	<form>
	<div>
	<div id="section1" class="label">
	<p>Checkboxes</p>
	</div>
	<div id="section1b" class="elements">
	<input type="checkbox" name="box1" /> - box one<br />
	<input type="checkbox" name="box1" /> - box one<br />
	<input type="checkbox" name="box1" /> - box one<br />
	<input type="checkbox" name="box1" /> - box one<br />
	<input type="checkbox" name="box1" /> - box one<br />
	</div>
	</div>
	<div>

	<div id="section2" class="label">
	<p>Buttons</p>
	</div>
	<div class="elements">
	<input type="radio" name="button1" /> - button one<br />
	<input type="radio" name="button1" /> - button one<br />
	<input type="radio" name="button1" /> - button one<br />
	<input type="radio" name="button1" /> - button one<br />
	<input type="radio" name="button1" /> - button one<br />
	<button>Submit</button>
	</div>
	</div>
	</form>
	<script type="text/javascript">

	var elements = document.getElementsByTagName("div");

	// 모든 영역 접기
	for (var i = 0; i < elements.length; i++) {
	if (elements[i].className == "elements") {
	elements[i].style.display="none";
	} else if (elements[i].className == "label") {
	elements[i].onclick=switchDisplay;
	}
	}

	// 상태에 따라 접거나 펼치기
	function switchDisplay() {

	var parent = this.parentNode;
	var target = parent.getElementsByTagName("div")[1];

	if (target.style.display == "none") {
	target.style.display="block";
	} else {
	target.style.display="none";
	}
	return false;
	}
	</script>
	</body>

[출처] https://gist.github.com/demun/3018037

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
4	[Bootstrap3] Bootstrap 기본	졸리운_곰	2020.02.20	506
3	bootstrap 시작하기	졸리운_곰	2017.01.29	717
2	Bootstrap 사용법	졸리운_곰	2017.01.29	716
1	Bootstrap	졸리운_곰	2017.01.29	365

첫 페이지 1 끝 페이지

쓰기

태그

JavaScript 접었다 폈다하는 자바스크립트 소스

접었다 폈다하는 자바스크립트 소스

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com