지금부터 jQuery 아코디언을 만들어보겠습니다.
순서는 HTML -> CSS -> jQuery 입니다.
[HTML]
결과.
[CSS]
결과.
[jQuery]
결과.
전체소스
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin:0px; padding:0px; } body { background-color:Black; color:White; } header, section, article { display:block; } header { font-family:Arial; margin:15px; } header h1 { font-size:40px; } header h2 { font-size:15px; olor:Gray; } section { margin:10px; font-family:arial;backgraound-color:rgba(255,255,255,0.1); padding:10px; border-radius:10px; } section hgroup h1 { font-size:20px; } section hgroup h2 { font-size:15px; color:Gray; text-align:right; } section article { margin:10px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script> <script type="text/javascript"> $(document).ready(function() {
$("article").hide(); $("section").toggle(openAccordion, closeAccordion);
});
function openAccordion(){ $("article").show("fast"); }
function closeAccordion(){ $("article").hide("fast"); } </script> </head> <body> <header> <h1>RintIanTta jQuery Lesson</h1> <h2>Accordion</h2> </header> <div> <section> <hgroup> <h1>jQuery + CSS + HTML - 아코디언</h1> <h2>jQuery</h2> </hgroup> <article> 지금부터 jQuery 아코디언을 만들어보겠습니다.
순서는 HTML -> CSS -> jQuery 입니다. </article> </section> </div> </body> </html> |
'Skills > Web' 카테고리의 다른 글
| jQuery & CSS3 & HTML5 - 슬라이드(Slider) (0) | 2014.01.13 |
|---|---|
| jQuery + CSS3 + HTML5 - 레이어 팝업(Layr popup) (0) | 2014.01.13 |
| jQuery Basic 17강 - hasClass() (0) | 2014.01.13 |
| jQuery Basic 16강 - Append & PrePend & After & Before (0) | 2014.01.13 |
| JQuery Basic 15강 - append() & prepend() (0) | 2014.01.13 |
