ファビコンの付け方
ファビコンとは この左側に設置されている画像のこと 付け方は簡単です。 ...
ファビコンとは この...
2020年10月27日
今回はjQueryを用いた１つのアコーディオン機能の作り方について書いていきたいと思います。
Q＆Aを作るときにかなり便利です！
アコーディオンとは
アコーディオンとはhtml、cssで作れる機能で、クリックしたらその場所が伸びて新しい欄が出てくる機能です。
私のブログでもPC版では左側にメニューがありますがこれもアコーディオン機能の一つです。
今回説明するのはQ＆Aのタイプでこのようなものです。
クリックすると
これの作り方を書いていきます。
作り方
先にコードを載せます。
解説はいらないって方はこのコードをコピペで使用してください。
コード
html
css
解説
まず初めに、jQueryを読み込みましょう。
<head>内に
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>を記述しましょう。
最新版のものについては、公式サイトをご確認ください。
現在はこちらのコードで正常に動いています。
次にhtmlのこの部分。
<div class="question">
<span>Q</span>
<p>ここに質問</p>
<p class="button">+</p>
</div>
<div class="answer">
<span>A</span>
<p>ここに答え</p>
</div>この辺りはほとんど難しいところはないと思いますが、ポイントとしては、QとAは色を変えたかったので<span>タグで括っています。
今回のメインのjQuery部分
<script>
jQuery(function ($) {
$(".answer").css("display", "none");
// ①答えを非表示
$('.question').click(function(){
$(this).next('.answer').slideToggle();
//②クリックされた.questionの兄弟要素の.answerが開いたり閉じたりする。
$('.question').not($(this)).next('.answer').slideUp();
//③クリックした以外の.questionの兄弟要素の.answerはslideup。
});
});
</script><script>タグで全体を括ってください。
これを</body>の直前に記述してください。
①
初期状態では答えを隠しておく必要がありますのでここで答えを非表示にしておきます。
②
この記述でアコーディオン機能を実装しています。
Answerとquestionが兄弟要素なので”next”を指定します。親子要素でしたら”children”や”parent”を指定してください
③
一度クリックしたものを他のものをクリックした際に戻したい際はこの記述を記載してください。
クリックしたら開きっぱなしで良いって方はこの記述は描かないでOKです。
まとめ
Html、css初心者の方だとアコーディオン機能の実装は難しく感じるかもしれませんが、実際には数行で、最悪理解できていなくてもコピペで実装することができるのでうまく活用してください！
