Q&A
【経営者MeetUp】というテキストを
アコーディオンメニューのテキストと同じ位置に寄せたいのですが
どうにもいかず困っています。
【経営者MeetUp】と【若手経営者塾N109】というテキストは
アコーディオンメニューなしで、テキストだけの状態にしたいのです。
ご助言、何卒よろしくお願い致します。
▮HTMLはこちらです。
<title>Swell-Accordion</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 【経営者MeetUp】<br> <input id="acd-check11" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check11">まずは年収1000万!</label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br> <br><br></p></div> </div> <input id="acd-check6" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check6">最強⁉「無借金経営」という選択肢</label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br> <br><br></p></div> </div> <input id="acd-check7" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check7">「赤字は自力でスピード解消しよう!」</label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br> <br><br></p></div> </div> <input id="acd-check12" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check12">セミリタイアのことを話しませんか?</label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br> <br><br></p></div> </div> <input id="acd-check8" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check8">言葉のプロから学ぶ「つたわる伝えかた」</label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br> <br><br></p></div> </div> <br> 【若手経営者塾N109】<br> <input id="acd-check9" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check9">5月スタートメンバー募集開始しました! </label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br><br><br></p></div> </div> <input id="acd-check10" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check10">成功のプロセスを学びながら、一緒に経営者さんをサポートしてくれるアンバサダーさん募集</label> <div class="acd-content"> <div class="block1"><p> 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br> <br><br></p></div></div>
▮CSSはこちらです。
/************************************ アコーディオンメニュー ************************************/ /*アコーディオン全体*/ @charset "UTF-8"; .acd-check { display: none; } .acd-label { padding: 10px 15px; box-sizing: border-box; background: #F1F5F4; display: flex; justify-content: space-between; margin: 0 auto 5px; width: 60%; border-bottom: 1px solid #313131; } .acd-label::after { display: flex; align-items: center; font-family: "Font Awesome 5 Free"; content: "\f0d7"; font-weight: 900; transition: all 0.3s; } .acd-content { height: 0; opacity: 0; transition: 0.3s; visibility: hidden; width: 60%; padding: 0; margin: 0 auto; } .acd-content p { margin: 0; padding: 0 20px; word-break: break-all; } .acd-check:checked + .acd-label + .acd-content { height: auto; opacity: 1; padding: 15px 0; visibility: visible; display: flex; align-items: center; word-break: break-all; } .acd-check:checked + .acd-label::after { transform: rotate(180deg); } @media screen and (max-width: 960px) { .acd-label { width: 95%; } .acd-content { width: 95%; } .acd-check:checked + .acd-label + .acd-content { padding: 10px 0; } }
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/30 05:41