WyrdHobby Posted July 8 Posted July 8 The page in question is https://www.wyrd-games.net/retailers Even though previewing in Safe Mode shows each accordion working properly, trying it on the site itself only allows accordions 1, 3, 5, and 7 to open. This is an example of the HTML that does work vs one that doesn't. Working Sample <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #ccc; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #b2d235; } .panel { padding: 18px; display: none; background-color: #b2d235; overflow: hidden; } </style> </head> <label class="accordion-label-country" for="accordion-Germany"></label> <div class="Country"> <img class="C_Flag" src="https://images.squarespace-cdn.com/content/54fe412ce4b0c449f7369857/1465457294491-T224XNZPIE5KUS4PY0MG/be.png?content-type=image%2Fpng" alt="Germany"> </div> <h2>Germany</h2> <button class="accordion">ACD Blackfire Entertainment GmbH</button> <div class="panel"> <article class="accordion-sub-text"> <div class="SUB_Content"> Phone: <span class="RatAd_PhoneNo">+49 2102 30592 0</span><br/> https://www.blackfire.eu/ </div> </article> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </html> Non-working Sample <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #ccc; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #b2d235; } .panel { padding: 18px; display: none; background-color: #b2d235; overflow: hidden; } </style> </head> <label class="accordion-label-country" for="accordion-China"></label> <div class="Country"> <img class="C_Flag" src="https://images.squarespace-cdn.com/content/v1/54fe412ce4b0c449f7369857/1465457305342-B0R8NAOHDCMKH6I7O0BI/cn.png?format=750w" alt="China"> </div> <h2>China</h2> <button class="accordion">Tabletop Wargames</button> <div class="panel"> <article class="accordion-sub-text"> <div class="SUB_Content"> Phone: <span class="RatAd_PhoneNo">+86-17628299116</span><br/> https://zmzzbq.taobao.com/<br> Zhe Li - 2268658721@qq.com </div> </article> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </html> Any help would be greatly appreciated. I apologize if this isn't the right formatting!
creedon Posted July 8 Posted July 8 Have you considered using Squarespace's built-in Accordion block? You may find it easier to style those than going with custom code. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
WyrdHobby Posted July 8 Author Posted July 8 2 minutes ago, creedon said: Have you considered using Squarespace's built-in Accordion block? You may find it easier to style those than going with custom code. Unless I'm missing something, the built-in Accordion doesn't allow the level of customization/styling that I need. For example, the design tab for the Accordion block lacks the options to use custom icons or coloring.
creedon Posted July 8 Posted July 8 Without knowing your design requirements I can't say the built-in accordion blocks will work for your needs. I can say that with code, CSS and/or JavaScript, it is possible to push the built-in accordion block past the built-in design options. There are two major issues going on with your code. First you are including a whole HTML pages multiple times within a page. This is an error. Only one HTML element can exist and work properly in a page and Squarespace has already provided it. The second issue is that the accordion code appears to be designed to address only one accordion element per page. It wasn't designed to be used multiple times within one page. The code would need to be reworked and it is not a simple task. In other words your code is not designed to be dropped into a SS site and work. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment