順番を入れ替えて表示させたい

次のHTMLがあるのですが、システム内部のため書き換えられず、javascriptで順番を入れ替えて表示ができないかと思っています。
また、カラー１の画像をクリックすればカラー１の説明を表示、カラー２の画像をクリックすればカラー２の説明を表示のようなアコーディオン表示を実装させたいのですが、順番を入れ替えると .next が効かなくなりどうすればいいか困っております。

現在の表示

▼▼▼HTMLはこうなっている▼▼▼▼

HTML
1
2<section class="vaL">
3 <div class="vaL-box">
4	 
5    <div class="vaL__item">
6      <div class="vaL__item__title">カラー1</div>
7       <div class="vaL__item__body">
8         <div class="vaL__item__image"><img src="http://kamp.design/kamp/01.jpg" alt=""></div>
9         <div class="vaL__item__contents">ここにカート１の内容ここにカート１の内容ここにカート１の内容</div>
10      </div>
11    </div>
12    
13    <div class="vaL__item">
14      <div class="vaL__item__title">カラー2</div>
15       <div class="vaL__item__body">
16         <div class="vaL__item__image"><img src="http://kamp.design/kamp/02.jpg" alt=""></div>
17         <div class="vaL__item__contents">ここにカート２の内容ここにカート２の内容ここにカート２の内容</div>
18      </div>
19    </div>
20    
21   </div>
22</section>
23
24
25<style>
26	.vaL{width:500px;margin:30px auto;}
27	.vaL__item__title{background:#ececec;margin:40px 0 10px;}
28	.vaL__item__contents{margin:10px 0;}
29	.vaL__item__image img{width:70px;}
30</style>
31
32
33<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
34<script>
35
36$(function(){
37  $('.vaL__item__image').click(function(){
38    $(this).next('.vaL__item__contents').slideToggle();
39  });
40});
41</script>

▼▼▼javascriptとcssでこのような形にしたい▼▼▼▼

▼▼▼試してみたこと▼▼▼▼

javascript
1<script>
2	$(function(){
3$('.vaL-box').after($('.vaL__item__contents'));
4
5 $('.vaL__item__image').click(function(){
6    $(this).next('.vaL__item__contents').slideToggle();
7  });
8});
9</script>

と記載し順番を入れ替えたところ、 .nextの位置が変わってしまったため効かなくなってしまいました。
順番を入れ替えてさらに、１の画像をクリックしたら1の説明、2の画像をクリックしたら２の説明が表示されようにはできないものでしょうか？
また、vaL_item_titleのタイトルも説明の直前に移動させて、画像クリックで表示非表示が切り替わるようにしたいです。

詳しい方お力貸していただけましたら幸いです。
よろしくお願いいたします。

miyabi_pudding

2020/11/14 05:59

そのシステムの部分を開発している担当者に、HTML出力を変えてもらったらいかがでしょうか？ JSとCSSだけでは理想の表示はけっこう骨が折れる構造だとお見受けしますので。

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

回答1件

ベストアンサー

javascript
1$(function(){
2  $('.vaL__item__image').insertBefore('.vaL__item:eq(0)')
3  .on('click',function(){
4    var idx=$('.vaL__item__image').index(this);
5    $('.vaL__item').eq(idx).slideToggle();
6  });
7});