jQueryを使用したアコーディオン
まずは jQueryをダウンロード します。
次にHTMLです。
accordion.html
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>アコーディオン</title> <style type="text/css"> div.accordion { border: solid 1px #FF9999; background-color: #FFCCCC; cursor: pointer; margin-top: 5px; } div.accordion + div { border-style: solid; border-width: 0px 1px 1px 1px; border-color: #FF9999; padding: 5px; } div.accordion + div p { margin: 0px; } </style> <script type="text/javascript" src="js/jQuery/jquery-1.5.2.js"></script> <script type="text/javascript" src="js/jQuery/ui/jquery-ui-1.8.12.custom.js"></script> <script type="text/javascript"> // <![CDATA[ $(function() { $('.accordion').click(function() { $(this).next().slideToggle(); }).next().hide(); }); // ]]> </script> </head> <body> <div> <div class="accordion">アコーディオン1</div> <div><p>アコーディオン1です。アコーディオン1です。アコーディオン1です。</p></div> <div class="accordion">アコーディオン2</div> <div><p>アコーディオン2です。アコーディオン2です。アコーディオン2です。<br />アコーディオン2です。アコーディオン2です。アコーディオン2です。</p></div> <div class="accordion">アコーディオン3</div> <div><p>アコーディオン3です。アコーディオン3です。アコーディオン3です。<br />アコーディオン3です。アコーディオン3です。アコーディオン3です。<br />アコーディオン3です。アコーディオン3です。アコーディオン3です。</p></div> </div> </body> </html>