jquery

펼치기와 접기

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset=utf-8>
    <title></title>
    <link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .hidden
        {
            display: none;
        }
        .bold
        {
            font-weight: bold;
        }
        .DivCss
        {
            background-color: #FFFFCC; border: thin dotted #000000; padding: 2px; margin: 0px; width: 200px;
        }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
        });
        $(document).ready(function () {
            var toggleStyleSwitcher = function () {
                $('#div1').addClass('bold');
            };
            $('#txt1').addClass('hidden');
 
            $('#Button1').click(function (event) {
                $('#txt1').toggleClass('hidden');
            });
 
            $('div:contains("내용 펼치기와 접기")').click(toggleStyleSwitcher);
        });
    </script>
</head>
<body>
    <div id="div1"><input type=button id="Button1" value='펼치기와 접기' align="bottom" /></div>
    <div id="txt1"  class="DivCss">테스트입니다.
 
</div>
</body>
</html>
 
 

댓글

댓글 본문
작성자
비밀번호
버전 관리
Frank
현재 버전
선택 버전
graphittie 자세히 보기