前提・実現したいこと
webページでアコーディオンを使った項目を実装したいのですが、
最初の段階で中のdd に該当する部分が4、5行ほど見れてdt 同様クリックすることでアコーディオン内全体が見れるような形にしたいのですが、サンプルを探してもなさそうでしたのでご教授いただけませんか?
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Accordion</title> <style type="text/css"> <!-- *{ margin:0; padding:0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } dl{ width: 760px; margin: 50px auto; } dt{ font-weight: bold; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 8px 8px 8px 12px; color: #FFF; background-color: #b2d2ea; } dd{ border: 1px solid #b2d2ea; border-top: none; height: 400px; padding: 12px; } #detail{ float: left; width: 730px; height: 180px; background-color: #ff7f50; } #introduction{ float: left; width: 730px; height: 180px; margin-top: 30px; background-color: #d3d3d3; } --> </style> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ $("dl dd").hide(); $("dl dt").click(function(){ $("dl dd").slideUp(); if($("+dd",this).css("display")=="none"){ $("+dd",this).slideDown(); } }); }); </script> </head> <body> <div id="container"> <dl> <dt>項目1</dt> <dd> <div id="detail"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div id="introduction"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </dd> <dt>項目2</dt> <dd> <div id="detail"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div id="introduction"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </dd> </dl> </div> </body> </html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー