Accordion_Title

<style> /* Accordion by gamingsalt media */ .acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit} .acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:5px;} .acdn .ac:nth-child(4n + 1){background:#f0f0ff;border:1px solid #8a8aff} .acdn .ac:nth-child(4n + 2){background:#fff0f3;border:1px solid #ff8aa1} .acdn .ac:nth-child(4n + 3){background:#f0faff;border:1px solid #8ad8ff} .acdn .ac:nth-child(4n + 4){background:#fff7f0;border:1px solid #ffc08a} .acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b} .acdn .cont ul, .acdn .cont ol{padding-left:13px} .acdn .cont li{padding:0} .acdn .cont a{text-decoration:none;color:#08102b} .acdn .cont a:hover{text-decoration:underline} .acdn p:first-child{margin-top:0} .acdn p:last-child{margin-bottom:0} .acTtl{display:flex;align-items:center;font-weight:700;color:#08102b} .acTtl span{display:flex;flex-grow:1} .acTtl span:before{content:'';padding-left:15px} .acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative} .acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b} .acIcn:after{position:absolute;transform:rotate(90deg)} .acMn{display:none} .acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px} .drK .acdn .ac{background:#252526;border:1px solid #4c4c4e} .drK .acdn .cont, .drK .acdn .cont a, .drK .acTtl, .drK .acMn:checked ~ .acTtl{color:#fefefe} .drK .acTtl .acIcn:before, .drK .acTtl .acIcn:after, .drK .acMn:checked ~ .acTtl .acIcn:before, .drK .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe} </style> <!--[ Accordion by NK (gamingsalt.com) ]--> <div class='acdn'> <!--[ Accordion 1 ]--> <div class='ac'> <div class='acCont'> <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/> <label class='acTtl' for='offaccor1'> <i class='acIcn'></i> <!--[ Accordion Title ]--> <span>Accordion_Title_1</span> </label> <!--[ Accordion Content ]--> <div class='cont'> <p>...</p> </div> </div> </div> <!--[ Accordion 2 ]--> <div class='ac'> <div class='acCont'> <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/> <label class='acTtl' for='offaccor2'> <i class='acIcn'></i> <!--[ Accordion Title ]--> <span>Accordion_Title_2</span> </label> <!--[ Accordion Content ]--> <div class='cont'> <p>...</p> </div> </div> </div> <!--[ Accordion 3 ]--> <div class='ac'> <div class='acCont'> <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/> <label class='acTtl' for='offaccor3'> <i class='acIcn'></i> <!--[ Accordion Title ]--> <span>Accordion_Title_3</span> </label> <!--[ Accordion Content ]--> <div class='cont'> <p>...</p> </div> </div> </div> <!--[ Accordion 4 ]--> <div class='ac'> <div class='acCont'> <input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/> <label class='acTtl' for='offaccor4'> <i class='acIcn'></i> <!--[ Accordion Title ]--> <span>Accordion_Title_4</span> </label> <!--[ Accordion Content ]--> <div class='cont'> <p>...</p> </div> </div> </div> </div>