[Vue.js]アコーディオンが開いたところの直下のアコーディオンだけ下にずらしたい

#理想の動作
6つのアコーディオン(1～3は一段目の横一列、4～6は二段目の横一列)があって1を開くと直下にある4だけを下にずらしたい。

#現在の動作
1を開いたら4,5,6すべて下にずれてしまう。

見にくいコードで申し訳ないのですが、改善点がわかる方いらっしゃいましたらお願いします...

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<title>Vue.js sample</title>
6		<link rel="stylesheet" href="css/style.css" >
7		<script src="js/vue.js"></script>
8<!--        <script src="js/script.js"></script>-->
9	</head>
10	
11	<body>
12<div id ="app">
13<js-accordion>
14  <div slot="title">アコーディオン1</div>
15  <div class="js-accordion--body" slot="body">
16    <p>アコーディオン1の中身</p>
17    <p>アコーディオン1の中身</p>
18    <p>アコーディオン1の中身</p>
19  </div>
20</js-accordion>
21<js-accordion>
22  <div slot="title">アコーディオン2</div>
23  <div class="js-accordion--body" slot="body">
24    <p>アコーディオン2の中身</p>
25    <p>アコーディオン2の中身</p>
26  </div>
27</js-accordion>
28<js-accordion>
29  <div slot="title">アコーディオン3</div>
30  <div class="js-accordion--body" slot="body">
31    <p>アコーディオン3の中身</p>
32    <p>アコーディオン3の中身</p>
33  </div>
34</js-accordion>
35<js-accordion>
36  <div slot="title">アコーディオン4</div>
37  <div class="js-accordion--body" slot="body">
38    <p>アコーディオン4の中身</p>
39    <p>アコーディオン4の中身</p>
40  </div>
41</js-accordion>
42<js-accordion>
43  <div slot="title">アコーディオン5</div>
44  <div class="js-accordion--body" slot="body">
45    <p>アコーディオン5の中身</p>
46    <p>アコーディオン5の中身</p>
47  </div>
48</js-accordion>
49<js-accordion>
50  <div slot="title">アコーディオン6</div>
51  <div class="js-accordion--body" slot="body">
52    <p>アコーディオン6の中身</p>
53    <p>アコーディオン6の中身</p>
54  </div>
55</js-accordion>
56</div>
57
58        
59    <script>
60Vue.component('js-accordion', {
61  template: `
62  <div class="js-accordion" v-cloak>
63  <button class="js-accordion--trigger" type="button" :class="{ '_state-open': isOpened }" @click="accordionToggle()">
64    <slot name="title"></slot>
65  </button>
66  <transition name="js-accordion" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
67    <div class="js-accordion--target" :class="{ '_state-open': isOpened }" v-if="isOpened">
68      <slot name="body"></slot>
69    </div>
70  </transition>
71</div>
72  `,
73
74  data() {
75    return {
76      isOpened: false
77    };
78  },
79  props: {
80    
81  },
82
83  methods: {
84    accordionToggle: function(){
85      this.isOpened = !this.isOpened;
86    },
87    beforeEnter: function(el) {
88      el.style.height = '0';
89    },
90    enter: function(el) {
91      el.style.height = el.scrollHeight + 'px';
92    },
93    beforeLeave: function(el) {
94      el.style.height = el.scrollHeight + 'px';
95    },
96    leave: function(el) {
97      el.style.height = '0';
98    }
99  }
100});
101
102new Vue({
103  el: '#app'
104});
105    </script>
106
107	</body>
108
109</html>

CSS
1@charset "UTF-8";
2html {
3
4	margin-right: auto;
5  margin-left: auto;
6  margin-bottom: 100%;
7	font-family: sans-serif;
8	font-size: 16px;
9  line-height: 1.5;
10}
11
12#app {
13  padding: 20px;
14  width: 80vw;
15  margin: 0 auto;
16  display: flex;
17  flex-wrap: wrap;
18}
19
20.js-accordion {
21  background-color: #fff;
22  border-color: #007DDF;
23  padding: 2px;
24  position: relative;
25}
26.js-accordion:last-child {
27  border-bottom-width: 1px;
28}
29.js-accordion--trigger {
30  position: relative;
31  display: block;
32  transition: all 0.3s ease-in;
33  color: #fff;
34  display: block;
35  font-size: 20px;
36  font-weight: bold;
37  text-align: left;
38  padding: 50px;
39  outline: none;
40  border: none;
41  cursor: pointer;
42  background-color: #007DDF;
43}
44.js-accordion--trigger:after {
45  display: inline-block;
46  width: 0;
47  height: 0;
48  border: solid transparent;
49  content: "";
50  border-top-color: #fff;
51  border-width: 7px;
52  position: absolute;
53  right: 48%;
54  bottom: 20px;
55  transition: all 0.3s ease-in;
56}
57.js-accordion--trigger._state-open {
58  background-color: #007DDF;
59  text-decoration: none;
60}
61.js-accordion--trigger._state-open:after {
62  -webkit-transform: rotateX(180deg);
63          transform: rotateX(180deg);
64  margin-top: -10px;
65}
66.js-accordion--trigger:hover {
67  background-color: #FFD58A;
68  text-decoration: none;
69}
70.js-accordion--target {
71  overflow: hidden;
72  transition: height 0.4s ease-in-out;
73}
74.js-accordion--body {
75  padding: 30px;
76}
77.js-accordion-enter-active {
78  -webkit-animation-duration: 1s;
79          animation-duration: 1s;
80  -webkit-animation-fill-mode: both;
81          animation-fill-mode: both;
82  -webkit-animation-name: js-accordion--anime__opend;
83          animation-name: js-accordion--anime__opend;
84}
85.js-accordion-leave-active {
86  -webkit-animation-duration: 1s;
87          animation-duration: 1s;
88  -webkit-animation-fill-mode: both;
89          animation-fill-mode: both;
90  -webkit-animation-name: js-accordion--anime__closed;
91          animation-name: js-accordion--anime__closed;
92}
93
94.js-accordion span {
95  font-size: 25px;
96  position: absolute;
97  top: 5px;
98  left: 45%;
99}
100
101@-webkit-keyframes js-accordion--anime__opend {
102  0% {
103    opacity: 0;
104  }
105  100% {
106    opacity: 1;
107  }
108}
109
110@keyframes js-accordion--anime__opend {
111  0% {
112    opacity: 0;
113  }
114  100% {
115    opacity: 1;
116  }
117}
118@-webkit-keyframes js-accordion--anime__closed {
119  0% {
120    opacity: 1;
121  }
122  100% {
123    opacity: 0;
124  }
125}
126@keyframes js-accordion--anime__closed {
127  0% {
128    opacity: 1;
129  }
130  100% {
131    opacity: 0;
132  }
133}

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

回答1件

ベストアンサー

原因は、アコーディオン1~6はすべて同じ階層に書かれており、アコーディオンの列の数は、その親となる要素の幅に依存している事だと思います。

そうなると制御の為には、親要素の幅次第で
[1,2,3]
[4,5,6]
となってしまっている構成を意図的に
[1,4]
[2,5]
[3,6]
に変更して、各構成単位を横並び(カラム)にしなくてはいけません。

カラム化の為には、CSSフレームワーク(bootstrap, Bulmaなど)を入れてしまったほうが手っ取りはやいので、そうされることをお勧めします。

以下Bulmaでのコード例です

CODEPEN

html
1  <div id="app">
2    <div class="columns">
3      <div class="column">
4        <js-accordion>
5          <div slot="title">アコーディオン1</div>
6          <div class="js-accordion--body" slot="body">
7            <p>アコーディオン1の中身</p>
8            <p>アコーディオン1の中身</p>
9            <p>アコーディオン1の中身</p>
10          </div>
11        </js-accordion>
12        <js-accordion>
13          <div slot="title">アコーディオン4</div>
14          <div class="js-accordion--body" slot="body">
15            <p>アコーディオン4の中身</p>
16            <p>アコーディオン4の中身</p>
17          </div>
18        </js-accordion>
19      </div>
20      <div class="column">
21        <js-accordion>
22          <div slot="title">アコーディオン2</div>
23          <div class="js-accordion--body" slot="body">
24            <p>アコーディオン2の中身</p>
25            <p>アコーディオン2の中身</p>
26          </div>
27        </js-accordion>
28        <js-accordion>
29          <div slot="title">アコーディオン5</div>
30          <div class="js-accordion--body" slot="body">
31            <p>アコーディオン5の中身</p>
32            <p>アコーディオン5の中身</p>
33          </div>
34        </js-accordion>
35      </div>
36      <div class="column">
37        <js-accordion>
38          <div slot="title">アコーディオン3</div>
39          <div class="js-accordion--body" slot="body">
40            <p>アコーディオン3の中身</p>
41            <p>アコーディオン3の中身</p>
42          </div>
43        </js-accordion>
44        <js-accordion>
45          <div slot="title">アコーディオン6</div>
46          <div class="js-accordion--body" slot="body">
47            <p>アコーディオン6の中身</p>
48            <p>アコーディオン6の中身</p>
49          </div>
50        </js-accordion>
51      </div>
52    </div>
53  </div>