【コピペで使える】プレーンなJavascriptで作る開閉ボタン（よくある質問等）
たーさんホームページのよくある質問などのページでこんなインターフェイスを見かけたことはありませんか？
よくある質問のようなページでは、ユーザーは自分が知りたい情報に素早くアクセスしたいため、それ以外の内容のテキストボリュームが多いと邪魔になりがちです。
そんなときに便利なのがこの開閉ボタン。通常時は質問部だけが目次的に並び、知りたい情報のみ開くことでストレスなく知りたい情報にたどり着くことができます。
今回はそんな開閉ボタンをJQueryを使わないプレーンなJavascriptで実現するサンプルコードをご紹介します。
HTML部
<dl>
<dt>Q1.質問<a href="javascript:void(0)" id="q1" onclick="openQuestion(1);">＋</a></dt>
<dd id="a1">答え答え答え答え答え答え答え答え答え答え答え</dd>
<dt>Q2.質問<a href="javascript:void(0)" id="q2" onclick="openQuestion(2);">＋</a></dt>
<dd id="a2">答え答え答え答え答え答え答え答え答え答え答え</dd>
<dt>Q3.質問<a href="javascript:void(0)" id="q3" onclick="openQuestion(3);">＋</a></dt>
<dd id="a3">答え答え答え答え答え答え答え答え答え答え答え</dd>
</dl>
CSS部
dl dt {
background:#f3f3f3;
position:relative;
padding:15px;
margin-bottom:20px;
}
dl dt a {
position:absolute;
right:20px;
top:15px;
color:#333;
}
dl dt a:hover {
color:#333;
text-decoration:none;
}
dl dd {
display:none;
margin-bottom:60px;
}
Javascript部
<script>
function openQuestion(num){
var status = document.getElementById("q" + num).textContent;
if(status=="＋"){
document.getElementById("q" + num).textContent = "－";
document.getElementById("a" + num).style.display= "block";
}
if(status=="－"){
document.getElementById("q" + num).textContent = "＋";
document.getElementById("a" + num).style.display= "none";
}
exit;
}
</script>
まとめ
プレーンなJavascriptでも割と簡単に実装ができますね！環境的にJQueryを設置するのがちょっと面倒なので、さくっと動かしてしまいたい・・・そんなときにご活用ください。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
