제이쿼리 버튼 한개로 디스플레이 와 텍스트 토글 기능

가장 간단한 토글기능

function openclose(){
let statu = $("#post_box");
statu.toggle();
}​

 

 

디스플레이 와 텍스트 토글 기능

$("#post_box").css("display",'none');

function openclose() {
    let status = $("#post_box").css('display');
    let statu = $("#post_box");


    if( status == 'block' ){
        statu.hide();
        $(".tolle").text("포스트박스열기")
    }
    else{
        statu.show();
        $(".tolle").text("포스트박스닫기")
    }
    
}

html 태그 안에 onclick="openclose()" 를 추가하면 사용가능 

 

또는

$(function () {
    $(".tolle").on("click",openclose);
})

클래스에 .on 함수 추가 

 

** 제이쿼리에 바닐라 자바스크립트 문법 addEventListener 를 같이 넣으면 에러가 난다

 

    let tolle = document.querySelector(".tolle");

    tolle.addEventListener("click",openclose)

단 이런식으로 바닐라 자바스크립트로 제이쿼리 함수를 실행시키는건 가능하다