제이쿼리 닫기버튼 추가?

제이쿼리 닫기버튼 추가?

QA

제이쿼리 닫기버튼 추가?

본문

안녕하세요 질문좀드리겠습니다.

아래 제이쿼리를 이용중인데요 

따로 닫기 버튼이 없더라구요 ㅠㅠ 

추가 하고싶은데 어떻게 해야하나요 

 


<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>

코드 자체가 둘다 겸용인데요.

보일때 누르면 닫히고

안보일때 누르면 열리고

답변을 작성하시기 전에 로그인 해주세요.
전체 16,737
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT