땀나는 애

[script] toggle_아코디언+옆에 화살표 바뀜 본문

쭈구리 코딩/내가 보고 쓰려고 모은 것

[script] toggle_아코디언+옆에 화살표 바뀜

달콤썸머 2019. 12. 31. 11:24
<!doctype html>
<html lang="ko">
 
<head>
    <meta charset="utf-8" />
    <title>아코디언</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,target-densitydpi=medium-dpi" />
 
 
</head>
 
<body>
    <style>
        .join1_box{position:relative;border:1px solid #bbb;padding:20px;margin-bottom:10px}
        .join1_box input{display:none}
        .join1_box h4  {position:relative;font-size:18px;font-weight:bold;color:#292929;width:100%}
        .join1_box h4 strong{;font-size:16px;font-weight:bold;color:#ef1c26;}
        .join1_box h4 label{position:absolute;top:0;right:0;width:31px;height:30px;background:url(../../images/join/chk_off.gif) no-repeat 0 0;cursor:pointer}
        .join1_box h4 label.on{background:url(../../images/join/chk_on.gif) no-repeat 0 0}
        .join1_box .con{display:none;width:97%;border:1px solid #f0f0f0;background:#fcfcfd;padding:10px;height:59px;overflow-y:auto;margin-top:20px}
        .join1_box .view{font-size:14px;color:#444;opacity:0.8;display:inline-block;border-bottom:1px solid #9a9a9a;margin-left:20px;cursor:pointer}
        .join1_box.on .con{display:block}
        .join1_box.on .view {opacity:1}
    </style>
    <script>
 
        $(function(){
        $(".join1_box .view").click(function(){
            $(".join1_box").removeClass("on");
            $(".join1_box .view").html("약관보기 ▼");
            $(".join1_box .con").slideUp();
            $(this).parent().next().stop().slideToggle();
            $(this).parent().parent().addClass("on");
            $(this).html("약관닫기 ▲");
        });
        $(".join1_box label ").click(function(){
            $(this).toggleClass('on');
        });
    });
    </script>
    <div class="joinCont">
        <h3 class="tit_style">
            <span class="bar"></span>
            홈페이지 회원약관
        </h3>
        <form action="">
            <section class="join1_box on">
                <input type="checkbox" id="agre0">
                <h4>개인회원 이용약관에 동의 <strong>(필수)</strong> <span class="view">약관닫기 ▲</span><label for="agre0"></label></h4>
                <div class="con" style="display:none"> 내용무 </div>
            </section>
            <section class="join1_box">
                <input type="checkbox" id="agre1">
                <h4>개인정보보호를 위한 이용자 동의<strong>(필수)</strong> <span class="view">약관보기 ▼</span><label for="agre1"></label></h4>
                <div class="con"> 내용무 </div>
            </section>
            <section class="join1_box">
                <input type="checkbox" id="agre2">
                <h4>수집한 개인정보의 제3자 제공 및 취급 위탁 동의<strong>(필수)</strong> <span class="view">약관보기 ▼</span><label for="agre2"></label></h4>
                <div class="con"> 내용무 </div>
            </section>
        </form>
    </div><!-- // content -->
</body>
 
</html>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
저작자표시 비영리 변경금지

'쭈구리 코딩 > 내가 보고 쓰려고 모은 것' 카테고리의 다른 글

[html+css]hover_이미 hover시 다른 이미지 바뀜  (0) 2019.12.31
[Script] dropdown menu_드롭다운메뉴 2,3뎁스  (0) 2019.12.31
[script] toggle _아코디언+active  (0) 2019.12.31
[script] slider _ 슬라이드 스크립트 모음  (0) 2019.12.31
[script] toggle _토글 클릭시 팝업 오픈  (0) 2019.12.31
'쭈구리 코딩/내가 보고 쓰려고 모은 것' Related Articles more
Comments