[jQuery] 특정 태그 On/Off 토글 기능 만들기

실무에서 자주 쓰이는 기능이다.

꼭 익혀주자. jquery 문법을 이용하면 코딩이 훨씬 간결해진다.

 

show() , hide() 함수가 핵심이다.

 

<a href="#none" onclick="mView('01')">홍길동 open</a>
<a href="#none" onclick="mView('02')">이순신 open</a>
 
 
 
<div class="planner_modal planner_01">
    <div class="planner_modal_close_btn"><img src="/img_240626/planner_close.png" alt=""></div>
    <div class="planner_modal_profile"><img id="md_img" src="/img_240626/planner/profile/hong.png" alt="">
    </div>
    <div class="planner_modal_wrap">
        <div class="planner_modal_name">
            <p id="md_name">홍길동 <span>PLANNER</span></p>
            <div class="insta_icon"><a href="#none"><img src="/img_240626/planner_modal_insta_icon.png" alt=""></a>
            </div>
        </div>    
    </div>
</div>
 
<div class="planner_modal planner_02">
    <div class="planner_modal_close_btn"><img src="/img_240626/planner_close.png" alt=""></div>
    <div class="planner_modal_profile"><img id="md_img" src="/img_240626/planner/profile/hong2.png" alt="">
    </div>
    <div class="planner_modal_wrap">
        <div class="planner_modal_name">
            <p id="md_name">이순신 <span>PLANNER</span></p>
            <div class="insta_icon"><a href="#none"><img src="/img_240626/planner_modal_insta_icon.png" alt=""></a>
            </div>
        </div>    
    </div>
</div>
 
 
<script>
function mView(num) {
    $(`.planner_modal.planner_${num}`).show();
 
    $('.planner_modal_close_btn').click(function () {
        $('.planner_modal').hide();
    })
}
</script>