블로그에서 펼치기/접기 기능 구현하기
17 Dec 2018 | Web Blog블로그에 펼치기와 접기 기능을 구현하는 방법을 포스팅한다.
먼저 head.html 파일에 들어가서, <head> 부분에 다음과 같은 구문을 추가한다 :
<script language='JavaScript' type='text/javascript'>
function layer_toggle(obj) {
if (obj.style.display=='none') obj.style.display = 'block';
else if (obj.style.display=='block') obj.style.display = 'none'; }
</script>
다음, 해당 기능을 구현할 때 다음과 같은 html 구문을 이용한다.
<div id="A" style="display: block;">
<a onclick="layer_toggle(document.getElementById('A')); layer_toggle(document.getElementById('B')); return false;" href="#">접힌 상태</a>
</div>
<div id="B" style="display: none;">
<a onclick="layer_toggle(document.getElementById('A')); layer_toggle(document.getElementById('B')); return false;" href="#">펼친 상태</a>
<span style = "line-height:50%"><br></span>
펼친 후 보여질 내용
</div>
실제 구현하면 다음과 같아진다.
간-단.
Comments