jQuery_Layout 및 레이어를 기반으로 드롭다운 축소(확장 및 축소) 특수 효과 구현

<meta charset="UTF-8"> <title>jQuery 드롭다운 축소 효과</title> <style type="text/css"> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #69C7F7; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #F27613; } .btn-slide { background: #F27613 url(http://files.jb51.net/file_images/article/201212/20121225165932118.gif) no-repeat right -50px;; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> <h1> </h1> <div style="display: block;" id="panel">시연을 수행할 수 없습니다. <!-- you can put content here --> </div> <p class="slide"> <a href="javascript:;" class="btn-slide active"> </a></p>시도하려면 클릭