연습장:혼종인2 문서 원본 보기


<html>
<div id="box01" class="box">
	<div class="btn">
		제목 1 
	</div>
	<div class="cont">
		내용 2
	</div>
</div>
<div id="box02" class="box">
	<div class="btn">
		제목 2
	</div>
	<div class="cont">
		내용 2
	</div>
</div>
<div id="box03" class="box">
	<div class="bts">
		제목 3
	</div>
	<div class="cont">
		내용 3
	</div>
</div>


<style>
.box{width:300px;padding:10px}
.bts{width:100%;height:50px;margin:10px;background:powderblue}
.cont{width:100%;height:100px;margin:10px;background:tomato;display:none}
</style>


    <script type="text/javascript">
for(i = 1 ; i <= 3 ; i++){
  $('#box0'+i).click(function(){
    $(this).find('.cont').toggle();
  });
}    </script>

</html>