접기/펼치기 기능구현
본문
그림과 같습니다. 홈페이지 메인에 위와 같은 기능을 구현하고 싶습니다.
단순히 접기/펼치기 기능을 적용해보려 하니
상단의 이미지 버튼3개가 뒤죽박죽되어버리네요.
아래는 적용해보다가 실패한 시점까지의 소스입니다.
<CSS>
#screen{margin:0 auto;text-align:center;display:inline-block;width:100%;position:relative;height:auto;}
.open {width:940px; height:auto; padding:10px; background:#FFF;}
.open li {float:left; padding:10px 0 0 10px; }
<HTMLl>
<div id="screen">
<div class="open">
<ul>
<li><a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)">
<img src="이미지1" />
</a><div style="DISPLAY: none">
<img src="이미지1 클릭시 나오는 상세내용">
<a onclick="this.parentNode.style.display='none';" href="javascript:void(0)">
접기
</a></div></li>
<li><a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)">
<img src="이미지2" />
</a><div style="DISPLAY: none">
<img src="이미지2 클릭시 나오는 상세내용">
<a onclick="this.parentNode.style.display='none';" href="javascript:void(0)">
닫기
</a></div></li>
<li><a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)">
<img src="이미지3" />
</a><div style="DISPLAY: none">
<img src="이미지3 클릭시 나오는 상세내용">
<a onclick="this.parentNode.style.display='none';" href="javascript:void(0)">
닫기
</a></div></li>
</ul>
</div>
</div>
답변 1
<script>
function persFaq(id){
var obj = document.getElementById(id);
if(obj.style.display == "none")
{
obj.style.display = "block";
}
else
{
obj.style.display = "none";
}
}
function persFaqs(name){
var obj = document.getElementsByName(name);
if(obj.style.display == "none")
{
obj.style.display = "block";
}
else
{
obj.style.display = "none";
}
}
</script>
<img src="" onclick="persFaq('d1')"><!-- onclick="persFaq('n1')" -->
<img src="" onclick="persFaq('d1')"><!-- onclick="persFaq('n2')" -->
<img src="" onclick="persFaq('d1')"><!-- onclick="persFaq('n3')" -->
<div style="display:none" id='d1' name='n1'><!-- style="display:block"> -->
</div>
<div style="display:none" id='d1' name='n2'><!-- style="display:block"> -->
</div>
<div style="display:none" id='d1' name='n2'><!-- style="display:block"> -->
</div>
