HTML　タブごとにアコーディオンの開いている状態を分けたい

前提・実現したいこと

タブ「予約について」で「予約の質問2」を開き、タブ「ログインについて」を選択すると全ての質問が閉じている状態にしたい。

発生している問題・エラーメッセージ

タブ「予約について」の「予約の質問2」を開いた状態で、タブ「ログインについて」を選択すると同じ行の「IDを忘れた」が開かれてしまいます。逆に片方を閉じるともう片方も閉じます。

該当のソースコード

HTML
1<div class="cp_qa">                                                                                                            
2	<!-- タブ -->                                                                                                                
3	<div class="cp_tabAll">                                                                                                    
4		<div class="cp_tab" v-for="tab in tabList" v-on:click.prevent="tabSwitching(tab)" style="display:inline-block">        
5			<input class="tId"type="radio" name="tabs" >                                                                       
6			<label class="tFor cp_tabitem">{{tab.categoryName}}</label>                                                        
7		</div>                                                                                                                 
8	</div>                                                                                                                     
9	<!-- /タブ -->                                                                                                               
10                                                                                                                               
11	<!-- アコーディオン -->                                                                                                           
12	<div>                                                                                                                      
13		<div class="uk-accordion" data-uk-accordion="showfirst: false" v-for="(list,index) in questionList" v-bind:key="index">
14			<h3 @click="iconChange(index)" class="uk-accordion-title uk-text-bold">{{list.question}}                           
15				<span v-bind:id="index" class="accordion-icon uk-float-left uk-icon-plus uk-icon-remove"></span>               
16			</h3>                                                                                                              
17			<div class="uk-accordion-content">{{list.answer}}</div>                                                            
18		</div>                                                                                                                 
19	</div>                                                                                                                     
20	<!--/アコーディオン -->    
21</div>

試したこと

おそらく原因は同じ<div>を使っていて、Listの中身だけを変えている事だと思います。
下はデベロッパーツールで確認した画像です。

アコーディオンを開くと、uk-activeが付きaria-expandedがTrueになるので、タブ切り替え時にuk-activeを消しaria-expandedをFalseにしようと.jsでDOM操作をしてみましたがうまくいきませんでした。

おそらく根本的に書き方が間違っていると思うので、ご教授お願い致します。

補足情報（FW/ツールのバージョンなど）

参考にしたサイト(https://copypet.jp/codedescription/962/)

fj68

2021/10/25 08:34

1. コードを見たところVueか何かのライブラリを使っているようですが、いかがですか。もし使用しているライブラリがあればご質問を編集してバージョンなどを追記していただけると、より詳しい方から回答が得られるかもしれません。 2. 現状のご質問にあるコードだけでは現象が再現できませんので、CSSやJSなど追記をお願い致します。 3. 「JavaScriptでDOM操作してみたがうまくいかなかった」とのことですが、どんなコードでしょうか。回答される方の参考になるやもしれませんので追記されるとよいでしょう。発生している問題や理想の状態はスクショなどでわかりやすく提示されていますので、現状がどうなっているか調査するために必要な上記の情報があれば、具体的な回答を得られると思います。ご参考まで。

D0NKAMA

2021/10/25 08:59

質問の修正を箇所を教えていただきありがとうございます。確かにこれだけの内容では回答者様も情報不足ですね。質問を編集させていただきます。

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

回答1件

自己解決

閲覧していただいた方には申し訳ないのですが自己解決いたしました。m(_ _;)m

修正したのHTMLとjsです。修正したHTMLが↓になります。

HTML
1<div class="cp_qa">                                                                                                    
2	<!-- タブ -->                                                                                                        
3	<div class="cp_tabAll">                                                                                            
4		<div class="cp_tab" v-for="tab in tabList" v-on:click.prevent="tabSwitching(tab)" style="display:inline-block">
5			<input class="tId"type="radio" name="tabs" >                                                               
6			<label class="tFor cp_tabitem">{{tab.categoryName}}</label>                                                
7		</div>                                                                                                         
8	</div>                                                                                                             
9	<!-- /タブ -->                                                                                                       
10                                                                                                                       
11	<!-- アコーディオン -->                                                                                                   
12	<div v-for="(list,index) in allQuestionList" v-bind:key="index">                                                   
13		<div v-show="selectTabSeq == list.categorySeq" class="uk-accordion" data-uk-accordion="showfirst: false" >     
14			<h3 @click="iconChange(index)" class="uk-accordion-title uk-text-bold">{{list.question}}                   
15				<span v-bind:id="index" class="accordion-icon uk-float-left uk-icon-plus uk-icon-remove "></span>      
16			</h3>                                                                                                      
17			<div class="uk-accordion-content">{{list.answer}}</div>                                                    
18		</div>                                                                                                         
19	</div>                                                                                                             
20	<!--/アコーディオン -->                                                                                                   
21</div>

今まではjsで選択したタブの質問に絞り込んだものだけをquestionListに格納していたのですが、allQuestionListにすべての質問を格納しV-showのselectTabSeqで選択しているタブと同じ区分の質問だけを表示させるようにすると、やりたかった動作になりました。

説明不足や文章が伝わりづらかったと思いますが、閲覧していただきありがとうございました。

投稿2021/10/26 02:11

D0NKAMA

総合スコア28