文法エラー、Element div not allowed as child of element div in this context.

初心者です。
FAQのページをJQuery,アコーディオンを用いて
flexで左右質問5個ずつの２カラムで表示し、dtをクリックしてもddが同じ枠内で表示、（同じborder内）、をしたいです。
しかしhttps://validator.w3.org/#validate_by_uri　で文法チェックをしたところ、

Element div not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

From line 217, column 9; to line 217, column 34

↩↩ <div class="faq_contents"><dt>Wh

Contexts in which element div may be used:
Where flow content is expected.
As a child of a dl element.
Content model for element div:
If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
If the element is not a child of a dl element: flow content.

このように言われました。

html
1<dl>
2     <div class="faqL">
3        　<div class="faq_contents"><dt>質問 <i class="fas fa-plus"></i></dt>
4        　<dd>答え</dd></div>
5     </div><!-- /.faqL -->
6     <div class="faqR">
7        　<div class="faq_contents"><dt>質問<i class="fas fa-plus"></i></dt>
8        　<dd>答え</dd></div>
9     </div><!-- /.faqR -->
10</dl>
11

css
1.FAQ dl{
2    display: flex;
3    justify-content: space-between;
4    max-width: 960px;
5    margin: 0 auto;
6    padding-top: 50px;
7    font-family: 'Montserrat', sans-serif;
8}
9.faq_contents{
10    border: 1px solid #253b52;
11    background-color: #fff;
12    margin-bottom: 20px;
13    padding: 5px;
14}
15.FAQ dt{  
16    font-size: 20px;
17    padding: 5px 10px;
18    font-weight: bold;
19    cursor: pointer;
20}
21.FAQ i{
22    float: right;
23    vertical-align: middle;
24    line-height: 30px;
25    color: #71A4D9;
26}
27.FAQ dd{
28    font-size: 18px;
29    margin: 0 20px 20px;
30    text-align: justify;
31}
32.faqL{
33    width: 50%;
34    margin-right: 50px;
35}
36.faqR{
37    width: 50%;
38}

jquery
1const dt=$('.FAQ dt');
2        const dd=$('.FAQ dd');
3    
4        dd.hide();
5    
6        dt.on('click',function(){
7        $(this).next().slideToggle();
8        dd.not($(this).next()).slideUp();
9    
10        $(this).children("i").toggleClass('fas fa-plus fas fa-minus');
11        dt.not($(this)).removeClass('fas fa-plus fas fa-minus');
12        
13        
14    
15    });

試したこと

faq_contentsというクラス名を消して、dt,ddにクラスをつけてみたりしたのですが、、そうすると、dtをクリックした時、ddはdtと別のborder枠内で表示されてしまいます。どうやっても私の今の技量では直せませんでした、、

m.ts10806

2021/11/14 03:33

そんな行数がないように見えますが、Javascriptで要素を追加されてるのでしたらそのコード、cssも質問本文に追記してください

nony

2021/11/14 04:43

ありがとうございます、追記しました。よろしくお願いします。

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

回答1件

ベストアンサー

「このコンテキストでは、要素divは要素divの子として許可されていません。」というエラーです。
dlタグの直下にdivタグを入れることはできますが、さらにdivを入れ子にするとエラーが出るようです。

div class="faqL"とdiv class="faqR"の直下をdtとddだけにしてみるとエラーが消えるのではないでしょうか？

追記

dtとddを同じborder内にしたいというのはこういうことでしょうか？

html
1    <div class="FAQ">
2        <dl>
3            <div class="faqL faq_contents">
4                <dt>質問 <i class="fas fa-plus"></i></dt>
5                <dd>答え</dd>
6            </div><!-- /.faqL -->
7            <div class="faqR faq_contents">
8                <dt>質問<i class="fas fa-plus"></i></dt>
9                <dd>答え</dd>
10            </div><!-- /.faqR -->
11        </dl>
12    </div>