アコーディオンの開閉方法を変えたい

Question

<ul class="acbox"><input id="ac-1" type="checkbox" />
<label for="ac-1"><img src="sp/3a/sp/shop/img/cate14.jpg" alt="NEW ARRIVAL">NEW ARRIVAL</label>
<li class="acbox-under1"><a href="https://1111/">新着アイテム&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
<li class="acbox-under1"><a href="https://1111/">再入荷アイテム&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
</ul>
<ul class="acbox"><input id="ac-5" type="checkbox" />
<label for="ac-5"><img src="sp/img/cate14.jpg" alt="スカート">スカート</label>
<li class="acbox-under"><a href="https://1111/">すべてのスカート&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
<li class="acbox-under"><a href="https://1111/">タイトスカート&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
<li class="acbox-under"><a href="https://1111/">フレアスカート&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
<li class="acbox-under"><a href="https://1111/">ロングスカート&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
<li class="acbox-under"><a href="https://1111/">ニットスカート&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
<li class="acbox-under"><a href="https://1111/">きれいめ&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<i class="fa fa-angle-right"></i></a></li>
</ul>


/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin: 0 13px 0 15px; /* ボックス全体の位置調整 */
  display: flex;
  flex-wrap: wrap; /*--折り返しの指定--*/
}

.acbox label{
  width: 100%;
  font-size: 12px; /* ラベルの文字サイズ */
  font-weight: light;
  text-align: left;
  background: #fff; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding: 3px 0 18px 0;
  border-radius: 0px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #555;
  border-bottom:1px solid #AAAAAA;
}

.acbox label img{
	margin:0 2% -7%;
	width:50px;
	border-radius: 50px; /* 画像の角の丸み */
}

.acbox label:hover{
  background: #fff; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #555;
  content:"▼"; /* ラベルのアイコン */
  position: absolute;
  top: 73%;
  right: 5%;
  margin-top: -22px;
}

.acbox input:checked ~ label::after {
  content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox li{
  height: 0px;
  opacity: 0;
  transition: 0.24s ease ; /* 開閉スピードの設定 */
}

.acbox input:checked ~ li{
  height: auto;
  padding: 7% 7%; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #f7f7f7; /* 開いた部分の背景色 */
  opacity: 1;
}

.acbox input:checked ~ label {
  background: #fff; /* クリック後のラベルの背景色 */
}

.acbox-under{
  width: 50%;
  font-size: 10px; /* 開いた部分の文字サイズ */
  color: #333; /* 開いた部分の文字色 */
  border-bottom:1px solid #e8e8e8;
  text-align: left;
}

.acbox-under i{
  color: #309bff;
  position: absolute;
  top: 23%;
  left: 107%;
}

.acbox-under1{
  width: 100%;
  font-size: 10px; /* 開いた部分の文字サイズ */
  color: #333; /* 開いた部分の文字色 */
  border-bottom:1px solid #e8e8e8;
  text-align: left;
}

.acbox-under1 i{
  position: absolute;
  top: 23%;
  left: 180%;
  color: #309bff;
}
.fa-angle-right{
  text-align: right;
  font-size:123% !important;
}
.acbox input ~ li{
padding: 0% 7%;
}

閉じるときに普通に下から消えていく感じにしたいです。

Comments

[K_3578]

質問はなんでしょうか。

[3-plaisir]

閉じるときに普通に下から消えていく感じにしたいです。

[m.ts10806]

現状の問題点（何ができていて何ができていないか）と、できていないことに対して調べたこと試したことを記載されないと単なる丸投げの作業依頼になります。

[yambejp]

「普通に下から消えていく感じ」がよくわかりません
いまも下からスライドアップしていますよね？
想定の動きとどう違うのでしょうか？

[3-plaisir]

現状左上からでてくる感じで、閉じる際は左上に消えていく感じになっております。
それを隠れていたものが表示されるようにしたいです。
で、閉じる際はかくしていくようにしたいです。
よろしくお願いいたします。

[3-plaisir]

https://yuzuyu3.com/css-accordion-box/
を参考につくりました。

[yambejp]

左上に消えていくのではなくて左側のpaddingが7%から0%になるからですね
回答したCSSを追記して最初からleft-paddingが7%になるようにすればよいでしょう

[3-plaisir]

ありがとうございます。
申し訳ございません。
アコーディオンの様に開閉するのではなく、下記のURLの様な動きにしたいです。
https://codepen.io/Creaticode/pen/ecAmo
難しいでしょうか？

[yambejp]

ちょっと意味がわかりません
子要素をもったリスト系のタグが複数無いと参考サイトのようにはなりませんよね？

[3-plaisir]

伝え方が下手ですいません。。。
開くと、新着アイテムと再入荷アイテムがでてきて、それを閉じる際に現状上下に伸縮する感じになっておりますが、下から箱で隠されていく感じにしたいです。
知識がなくすみません、やはり難しいでしょうか？

[m.ts10806]

質問本文に追記してください。

>現状の問題点（何ができていて何ができていないか）と、できていないことに対して調べたこと試したことを記載されないと単なる丸投げの作業依頼になります。

Answer 1

.acbox input ~ li{
padding: 0% 7%;
}

Comments

[3-plaisir]

ありがとうございます。