Lyinghere Posted June 13, 2020 Share Posted June 13, 2020 Greetings all, Is there any means to do an accordion/toggle style for FAQs or other drop-down content?they all seem to require the css/code insert - so this would only be accessible if you are on a business plan or higher. thoughts, as this is already over budget? thank you B[ avenue template ] Link to comment
tuanphan Posted June 13, 2020 Share Posted June 13, 2020 This code for Personal Plan Add Code Block > Insert this <div class="t-accordion"> <div class="container"> <div class="column"> <div> <!-- Accordion 01 --> <label class="accordion"> <input type="checkbox" name="checkbox-accordion"> <div class="accordion__header">Lorem ipsum dolor sit amet</div> <div class="accordion__content"> <h6>Lorem ipsum dolor sit amet,</h6> <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </label> <!-- Accordion 02 --> <label class="accordion"> <input type="checkbox" name="checkbox-accordion"> <div class="accordion__header">Lorem ipsum dolor sit amet</div> <div class="accordion__content"> <h6>Lorem ipsum dolor sit amet,</h6> <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </label> <!-- Accordion 03 --> <label class="accordion"> <input type="checkbox" name="checkbox-accordion"> <div class="accordion__header">Lorem ipsum dolor sit amet</div> <div class="accordion__content"> <h6>Lorem ipsum dolor sit amet,</h6> <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </label> </div> </div> </div> </div> Add to Home > Design > Custom CSS .t-accordion { h1, h2, h3, h4, h5, h6 { font-weight: 800; } p { color: black; font-size: 14px; } .container { display: table; margin: 0 auto; width: 80%; } .column { display: table-cell; padding: 0px 10px; width: 50%; } h2 { color: #1abc9c; text-align: center; margin: 20px 0; } .accordion { display: block; font-size: inherit; margin: 0px; position: relative; } .accordion input { display: none; position: absolute; visibility: hidden; left: 50%; top: 50%; z-index: 1; } .accordion__header { background-color: #1abc9c; border: 1px solid #15967d; border-bottom-width: 0px; color: #10715e; cursor: pointer; transition: background 0.2s; padding: 20px; position: relative; z-index: 2; } .accordion__header:hover { background-color: #17a98c; color: white; } .accordion__header:hover:before, .accordion__header:hover:after { background-color: white; } .accordion__header:before, .accordion__header:after { background-color: #10715e; content: ''; display: block; position: absolute; z-index: 3; } .accordion__header:before { height: 2px; margin-top: -1px; top: 50%; right: 20px; width: 8px; } .accordion__header:after { height: 8px; margin-top: -4px; top: 50%; right: 23px; width: 2px; } .accordion input:checked ~ .accordion__header { background: #15967d; border-color: #15967d; color: white; } .accordion input:checked ~ .accordion__header:hover { background-color: #2ca18a; border-color: #15967d; color: white; } .accordion input:checked ~ .accordion__header:before { background-color: white; } .accordion input:checked ~ .accordion__header:after { display: none; } .accordion:first-child .accordion__header { border-top-left-radius: 4px; border-top-right-radius: 4px; } .accordion:last-child .accordion__header { border-bottom-width: 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .accordion:last-child input:checked ~ .accordion__header { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .accordion__content { background-color: white; border: 1px solid #1abc9c; border-width: 0px 1px; display: none; padding: 20px; } .accordion input:checked ~ .accordion__content { display: block; } .accordion:last-child .accordion__content { border-bottom-width: 1px; border-radius: 0px 0px 4px 4px; } .accordion__content h6 { color: #1abc9c; font-size: 18px; margin-bottom: 5px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
e_robertson Posted March 13, 2021 Share Posted March 13, 2021 @tuanphan This is really cool – thank you for sharing. Is there a version of this code where only one accordion section can be open at one time? Link to comment
tuanphan Posted March 23, 2021 Share Posted March 23, 2021 On 3/13/2021 at 7:52 PM, e_robertson said: @tuanphan This is really cool – thank you for sharing. Is there a version of this code where only one accordion section can be open at one time? I'm afraid this is not possible in Personal Plan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment