클릭하면 내용 보이고 클릭하면 내용 숨기기 ( View Layer Toggle ) > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

클릭하면 내용 보이고 클릭하면 내용 숨기기 ( View Layer Toggle )

샘플보기 : https://www.happyjung.com/demo/js/layer_toggle.php

<style>
.productinfo {
    margin:25px 0 25px 0;
}
.productinfo_button1 {
    height: 40px;
    line-height: 40px;
    margin:0 auto;
    width: 96%;
    font-size: 15px;
    color: #fff;
    background: #295ba0 url("./layer_toggle_img_down_white.png") no-repeat 90% 50%;
    background-size: 15px;
}
.productinfo_button2 {
    height: 40px;
    line-height: 40px;
    margin:0 auto;
    width: 96%;
    font-size: 15px;
    color: #fff;
    background: #295ba0 url("./layer_toggle_img_up_white.png") no-repeat 90% 50%;
    background-size: 15px;
}
.productinfo_view {
    padding: 25px 10px 15px 10px;
    text-align:left;
}
</style>
    
<script>
function layer_toggle(obj) {
    if (obj.style.display == 'none') obj.style.display = 'block';
    else if (obj.style.display == 'block') obj.style.display = 'none';
}
</script>

<div class="productinfo">
    <div id="아이디1" style="display:block">
        <a href="javascript:;" onclick="layer_toggle(document.getElementById('아이디1')); layer_toggle(document.getElementById('아이디2'));return false;"><p class="productinfo_button1">내용보기</p></a>
    </div>
    <div id="아이디2" style="display:none;" >
        <a href="javascript:;" onclick="layer_toggle(document.getElementById('아이디1')); layer_toggle(document.getElementById('아이디2'));return false;"><p class="productinfo_button2">내용보기</p></a>
        <div class="productinfo_view">
            내용입니다
        </div>
    </div>
</div>

참고자료
https://xe1.xpressengine.com/qna/1582397