toggleクラスではじめ非表示にしたい

HTML
1<section>
2		<div class="section__inner">
3			<h2 class="secTitle">Q & A</h2>
4			<p class="secTitle-sub">よくある質問</p>
5
6			<dl class="accordion-menu">
7				<div>
8					<dt>テキストが入ります。</dt>
9					<dd class="indent-1">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
10					</dd>
11				</div>
12
13				<div>
14					<dt>テキストが入ります。</dt>
15					<dd class="indent-1">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
16					</dd>
17				</div>
18
19				<div>
20					<dt>テキストが入ります。</dt>
21					<dd class="indent-1">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
22					</dd>
23				</div>
24
25		</div>
26	</section>
27``````CSS

dt{
width: 100%;
height: 100px;
background-color: #edede2;
padding: 40px 48px;
border-radius: 8px;
margin-bottom: 24px;
display: flex;
align-items: center;
}
dt::before{
content: "Q";
margin-right: 32px;
}
dd::before{
content: "A";
padding-left: 32px;
}
dd.indent-1{
padding-left: 1em;
text-indent: -3em;
display: flex;
}
dd{
width: 730px;
margin: 0 48px 24px;
display: none;
}

jQery
1
2$(function(){
3  $(".accordion-menu dt").on("click",function(){
4    $(this).next().slideToggle();
5  });
6
7});

はじめ、ddタグの非表示ができていたのですが、text-indentを使用し、display:flexでddタグのテキストのインデントを揃えてから、ddタグのはじめ非表示ができなくなりました。
display:flexを使用しないという以外の回避方法はありますでしょうか？

よろしくお願いいたします。

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

回答1件

ベストアンサー

記事要素を position: absolute; で絶対配置して、適切にレイアウトすることになりますね。
display:flexより面倒になりますが、slideToggle()をつかうなら仕方ないかな。

css
1dd::before{  
2  content: "A"; 
3  position: absolute;
4  left: 0;   
5}  
6dd.indent-1{  
7  padding-left: 44px;
8  position: relative;
9}  
10dd{  
11  width: 730px;  
12  margin: 0 48px 24px;  
13  display: none;
14}