Radiance2022
Member-
Posts
8 -
Joined
-
Last visited
Radiance2022's Achievements
Level 1 (1/20)
0
Reputation
-
JavaScript Accordion Not Expanding with Embed Content
Radiance2022 replied to Radiance2022's topic in Customize with code
I've tried posting this code in a separate block on the page as you suggested, then I tried in the same code block as my code, both above and below my code, and tried putting it in the Advanced -> "head" section of the page and none of them work. I'm sorry if I'm being difficult, or if I'm doing something wrong, but having a drop down like this really shouldn't be that hard. There's a built in accordian on the site but I can't customize it the way I want. I can only put text inside and not code or pictures or anything else. I can't even get images to change their transparency when the mouse is hovering over it. But that's another issue. So far, I'm pretty unhappy with this platform but hopefully I can figure it out as my problem but it really shouldn't be this hard. Do you have any other suggestions given that posting your code in all of those places didn't work? -
JavaScript Accordion Not Expanding with Embed Content
Radiance2022 replied to Radiance2022's topic in Customize with code
Can anyone resolve this issue? -
JavaScript Accordion Not Expanding with Embed Content
Radiance2022 replied to Radiance2022's topic in Customize with code
Hello, I am on the Business Plan yearly and I have tried your suggestions to the current code and the button still do not expand properly. They just show as highlighted when you click on them. <style> .accordion { background-color: #eee; 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: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <h2>Additional Forms</h2> <p>Click to view form.</p> <button class="accordion">IGL Spring - Returning Captains</button> <div class="panel"> <embed type="text/html" src="https://docs.google.com/forms/d/e/1FAIpQLSegEUvsbbFJ_NmjcuV_3HEM6paFYvxVjtg-i0yCynLajvX5bw/viewform" width="1000" height="2100"> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Form 2</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Form 3</p> </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.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> -
JavaScript Accordion Not Expanding with Embed Content
Radiance2022 replied to Radiance2022's topic in Customize with code
Did you find an answer to why its not working on SquareSpace platform? -
JavaScript Accordion Not Expanding with Embed Content
Radiance2022 replied to Radiance2022's topic in Customize with code
I don't remember specifically, through various sources I built it and it runs fine on w3schools HTML page. --- EDIT: Actually it looks like I grabbed it from w3schools. https://www.w3schools.com/howto/howto_js_accordion.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion -
JavaScript Accordion Not Expanding with Embed Content
Radiance2022 replied to Radiance2022's topic in Customize with code
Does no one have an answer to this? Is there a way I can contact a SquareSpace Support Expert or something? -
Site URL: https://www.radianceesports.com/contact-us Hello, I'm trying to write an accordion to display an embed Google Sheet form at the bottom of the page provided. The code works fine outside of squarespace. On the live site, the buttons with not expand but only remain highlighted once selected. Any help would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; 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: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <h2>Additional Forms</h2> <p>Click to view form.</p> <button class="accordion">IGL Spring - Returning Captains</button> <div class="panel"> <embed type="text/html" src="https://docs.google.com/forms/d/e/1FAIpQLSegEUvsbbFJ_NmjcuV_3HEM6paFYvxVjtg-i0yCynLajvX5bw/viewform" width="1000" height="2100"> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Form 2</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Form 3</p> </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.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> </body> </html>