jQuery アコーディオン　一つ目だけ開いている状態を作りたい

アコーディオンメニューで、一つ目だけ開いている状態で他は押したら開く、押したら閉じる（一つ目も同じ）、が作りたいのですがうまくいきません。お分かり頂ける方ご教示お願いします。

ps. 一つ目が開いてない状態であれば出来ました。

html

<body> <section class="accordion"> <div class="accordion-container"> <h4 class="accordion-title jsAccordionTitle">クリック</h4> <div class="accordion-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> <h4 class="accordion-title jsAccordionTitle">クリック</h4> <div class="accordion-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> <h4 class="accordion-title jsAccordionTitle">クリック</h4> <div class="accordion-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="main.js"></script> </body>

css
@charset "UTF-8";
/resetCSS/
html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* CSS for CodePen */
.accordion {
margin-top: 10px;
}

.accordion-container {
width: 500px;
margin: 0 auto;
}

.accordion-title {
background-color: #fff;
border-top: 1px solid #010327;
color: #010327;
font-size: 18px;
padding: 12px 12px 12px 32px;
position: relative;
cursor: pointer;
user-select: none;
}

.accordion-title:last-of-type {
border-bottom: 1px solid #010327;
}

.accordion-title::before, .accordion-title::after {
content: '';
display: block;
background-color: #010327;
position: absolute;
top: 50%;
width: 15px;
height: 2px;
right: 25px;
}

.accordion-title::after {
transform: rotate(90deg);
transition-duration: .3s;
}

.accordion-title:hover,
.accordion-title:active,
.accordion-title.is-active {
text-decoration: underline;
}

.accordion-title.is-active::before {
opacity: 0;
}

.accordion-title.is-active::after {
transform: rotate(0);
}

.accordion-content {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding: 0 18px;
line-height: 0;
height: 0;
overflow: hidden;
opacity: 0;
transition-duration: .3s;
}

.accordion-content.is-open {
background-color: #e7e7e7;
padding: 12px 18px;
margin: 12px 0;
line-height: normal;
/* numberに書き換える*/
height: auto;
opacity: 1;
}

jQuery
$(function () {
$('.jsAccordionTitle').on('click', function () {
//nextは次の要素を取得する、今回はクリック要素の次の要素にis-showクラスをつけている
$(this).next().toggleClass('is-open');
//クリックした要素自体にもclass付与
$(this).toggleClass('is-active');
});
});

行動規範の内容に同意します

回答3件

ベストアンサー

最初の要素だけクリックしてはだめでしょうか？

javascript
1$(function(){
2  $('.jsAccordionTitle').on('click', function () {
3    $(this).next().toggleClass('is-open');
4    $(this).toggleClass('is-active');
5  }).eq(0).trigger('click');
6});

投稿2022/01/24 01:45

yambejp

総合スコア114843

gaki-log

2022/01/26 04:08

完璧に求めていたものになりました。ありがとうございます。

行動規範の内容に同意します

こんな感じで、いかがでしょうか？

HTMLの変更点
1番最初の表示させたいcontentのclassに、is-openを記述

<div class="accordion-content is-open">

jQureyは、以下の記述で表示できるかと思います

$(function () {
  $('.accordion-title').click(function () {
    $(this).addClass('is-active');
    $(this).next().addClass('is-open');

    // clickしたもの以外.not(this)は、自動で閉じる
    $('.accordion-title').not(this).removeClass('is-active');
    $('.accordion-title').not(this).next().removeClass('is-open');
  })
});

投稿2022/01/23 14:28

編集2022/01/23 14:50

ryu1go10

総合スコア4

最初に...
元にあった物を変える形になってしまいますが、CSSを変更するなどして対応していただければと思います。

HTML
1<dl class="toggle_contents">
2	<dt class="toggle_title">メインメニュー01<span class="toggle_btn">開く</span></dt>
3	<dd>
4		<ul>
5			<li><a href="#">サブメニュー01</a></li>
6			<li><a href="#">サブメニュー02</a></li>
7			<li><a href="#">サブメニュー03</a></li>
8		</ul>
9	</dd>
10</dl>
11<dl class="toggle_contents">
12	<dt class="toggle_title">メインメニュー02<span class="toggle_btn">開く</span></dt>
13	<dd>
14		<ul>
15			<li><a href="#">サブメニュー01</a></li>
16			<li><a href="#">サブメニュー02</a></li>
17			<li><a href="#">サブメニュー03</a></li>
18		</ul>
19	</dd>
20</dl>
21<dl class="toggle_contents">
22	<dt class="toggle_title">メインメニュー03<span class="toggle_btn">開く</span></dt>
23	<dd>
24		<ul>
25			<li><a href="#">サブメニュー01</a></li>
26			<li><a href="#">サブメニュー02</a></li>
27			<li><a href="#">サブメニュー03</a></li>
28		</ul>
29	</dd>
30</dl>

CSS
1.toggle_contents {
2	border: 2px solid #d9d9d9;
3}
4.toggle_title {
5	position: relative;
6	padding: 15px;
7	cursor: pointer;
8	font-size: 26px;
9	text-align: center;
10	line-height: 1.4;
11}
12.toggle_btn {
13	position: absolute;
14	top: 50%;
15	right: 20px;
16	transform: translateY(-50%);
17	background: #0052a4;
18	display: block;
19	width: 24px;
20	height: 24px;
21	text-indent: 100%;
22	white-space: nowrap;
23	overflow: hidden;
24	border-radius: 50%;
25}
26.toggle_btn:before, .toggle_btn:after {
27	display: block;
28	content: '';
29	background-color: #fff;
30	position: absolute;
31	width: 10px;
32	height: 2px;
33	top: 50%;
34	left: 50%;
35	transform: translate(-50%, -50%);
36}
37.toggle_btn:before {
38	width: 2px;
39	height: 10px;
40}
41.toggle_title.selected .toggle_btn:before {
42	content: normal;
43}
44.toggle_contents dd {
45	display: none;
46}

jQuery
1$(function(){
2	$('.toggle_title:first').addClass('selected');
3	$('.toggle_title').click(function(){
4		$(this).toggleClass('selected');
5		$(this).next().slideToggle();
6	});
7});

投稿2022/01/23 08:03