제이쿼리 닫기버튼 추가?
본문
안녕하세요 질문좀드리겠습니다.
아래 제이쿼리를 이용중인데요
따로 닫기 버튼이 없더라구요 ㅠㅠ
추가 하고싶은데 어떻게 해야하나요
<HTML>
<HEAD>
<!-- jQuery를 사용하려면 아래 코드 한 줄을 반드시 추가해야한다. -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("#spreadBtn").click(function(){
if($("#hiddenContent").is(":visible")){
$("#hiddenContent").css("display", "none");
}else{
$("#hiddenContent").css("display", "block");
}
});
});
</script>
</HEAD>
<BODY>
<button id="spreadBtn" class="btn01">펼치기</button>
<div id="hiddenContent" class="example01" style="display: none;">내용</div>
</BODY>
</HTML>
답변 2
같은 아이디를 갖는게 두개이니 작동을 안하는 겁니다.
아래 두가지 방식 있으니 해보세요.
버튼 아이디 잘 보시고요.
<HTML>
<HEAD>
<!-- jQuery를 사용하려면 아래 코드 한 줄을 반드시 추가해야한다. -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</HEAD>
<BODY>
<script>
$(document).ready(function(){
$("#spreadBtn").click(function(){
if($("#hiddenContent").is(":visible")){
$("#hiddenContent").css("display", "none");
$("#spreadBtn").text("펼치기");
}else{
$("#hiddenContent").css("display", "block");
$("#spreadBtn").text("닫기");
}
});
});
</script>
<button id="spreadBtn" class="btn01">상태에 따라 이름이 변하는 버튼</button>
<div id="hiddenContent" class="example01" style="display: none;">내용</div>
<hr>
<script>
$(document).ready(function(){
$("#spreadBtn_1").click(function(){
$("#hiddenContent_2").css("display", "block");
});
});
$(document).ready(function(){
$("#spreadBtn_2").click(function(){
$("#hiddenContent_2").css("display", "none");
});
});
</script>
<button id="spreadBtn_1" class="btn01">펼치기</button>
<button id="spreadBtn_2" class="btn01">닫기</button>
<div id="hiddenContent_2" class="example01" style="display: none;">내용</div>
</BODY>
</HTML>
와 너무감사합니다.
코드 자체가 둘다 겸용인데요.
보일때 누르면 닫히고
안보일때 누르면 열리고
그런데 이게 버튼이 2개 일시에는 아무것도 작동을 안하더라구요
