Linajanuleviic Posted January 19 Share Posted January 19 Hi everyone! I've been trying to find how to add a toggle/accordion on my products page as my ingredient list is a little long & not very appealing on the eye. There doesn't seem to be much flexibility when it comes to adding various features to the product pages so I will need to learn how to code properly at some point. For now, I've attached an image below of what I'm looking for, hopefully someone can help:) Thank you! Link to comment
adifederico Posted January 19 Share Posted January 19 A good spot to dabble with code is w3schools.com. That is where I started. You can see how a basic accordion is coded here: https://www.w3schools.com/howto/howto_js_accordion.asp . I have also gone ahead and taken this example and set it up in the style you are looking for hope this helps. Just copy and past this code in a code block. <style> .custom-accordion { border-bottom: 1px solid black; border-top: 1px solid black; border-left: none; border-right: none; background-color: white; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin: 5px 0; } .custom-accordion span { color: #414344; padding-left: 10px; font-size: 17px; } .custom-active, .custom-accordion:hover { background-color: white; } .custom-accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .custom-active:after { content: "\2212"; } .custom-panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <button class="custom-accordion">01<span>Who It's For</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="custom-accordion">02<span>How To Use</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="custom-accordion">03<span>Ingredients</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="custom-accordion">04<span>Why Subscribe</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu dui vivamus arcu felis bibendum ut tristique et. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Leo vel fringilla est ullamcorper eget. Augue ut lectus arcu bibendum. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Nunc lobortis mattis aliquam faucibus. Urna molestie at elementum eu facilisis sed. Turpis egestas maecenas pharetra convallis posuere morbi leo. At urna condimentum mattis pellentesque id nibh. </p> <script> var acc = document.getElementsByClassName("custom-accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("custom-active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> Link to comment
tuanphan Posted January 26 Share Posted January 26 On 1/19/2023 at 10:27 PM, Linajanuleviic said: Hi everyone! I've been trying to find how to add a toggle/accordion on my products page as my ingredient list is a little long & not very appealing on the eye. There doesn't seem to be much flexibility when it comes to adding various features to the product pages so I will need to learn how to code properly at some point. For now, I've attached an image below of what I'm looking for, hopefully someone can help:) Thank you! Hi, You can edit Additional Info > Add an Accordion Block to achieve this 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