《jQuery》クリックで開閉する折りたたみメニュー
公開日：2023年09月13日 最終更新日：2024年12月10日
Ad
クリックで開閉する折りたたみメニューのサンプルになります。
CSSはどのサンプルも同じです。
個別に開閉する
クリックすると１つずつ開くことができます。
DEMO
折りたたみメニュー
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
折りたたみメニュー
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
折りたたみメニュー
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
HTML
<p class="title">折りたたみメニュー</p>
<p class="box">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
<p class="title">折りたたみメニュー</p>
<p class="box">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
<p class="title">折りたたみメニュー</p>
<p class="box">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>CSS
開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。
.title {
border-bottom: 1px solid #999;
}
.title:hover {
color: #999;
}
.title:after {
content: '↓';
}
.title.open:after {
content: '↑';
}
.box {
background: #eee;
padding: 20px;
}JavaScript
記述の前にjQueryの読み込みが必要です。
jQuery(function($){
$('.box').hide();
$('.title').click(function () {
$(this).next('.box').slideToggle();
$(this).toggleClass('open');
});
});最初のメニューだけ開いた状態にする
最初のメニューを開いた状態にします。
クリック後の動作は上のサンプルと同じです。
DEMO
タイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
HTML
<p class="title2">タイトル</p>
<p class="box2">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
<p class="title2">タイトル</p>
<p class="box2">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
<p class="title2">タイトル</p>
<p class="box2">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>CSS
開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。
.title2 {
border-bottom: 1px solid #999;
}
.title2:hover {
color: #999;
}
.title2:after {
content: '↓';
}
.title2.open:after {
content: '↑';
}
.box2 {
background: #eee;
padding: 20px;
}JavaScript
記述の前にjQueryの読み込みが必要です。
jQuery(function($){
$('.box2').hide();
$('.title2').click(function () {
$(this).next('.box2').slideToggle();
$(this).toggleClass('open');
}).filter(':eq(0)').click();
});1つだけ開いた状態にする
クリックしたメニュー以外が開いている場合は閉じるようにしています。
DEMO
折りたたみメニュー
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
折りたたみメニュー
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
折りたたみメニュー
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
HTML
<p class="title3">折りたたみメニュー</p>
<p class="box3">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
<p class="title3">折りたたみメニュー</p>
<p class="box3">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>
<p class="title3">折りたたみメニュー</p>
<p class="box3">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>CSS
開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。
.title3 {
border-bottom: 1px solid #999;
}
.title3:hover {
color: #999;
}
.title3:after {
content: '↓';
}
.title3.open:after {
content: '↑';
}
.box3 {
background: #eee;
padding: 20px;
}JavaScript
記述の前にjQueryの読み込みが必要です。
jQuery(function ($) {
$('.box3').hide();
$('.title3').click(function () {
$('.box3').not($(this).next('.box3')).slideUp();
$('.title3').not(this).removeClass('open');
$(this).next('.box3').slideToggle();
$(this).toggleClass('open');
});
});