Jump to content

JavaScript Accordion Not Expanding with Embed Content

Recommended Posts

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>

 

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

On 2/18/2022 at 10:39 PM, Radiance2022 said:

Does no one have an answer to this? Is there a way I can contact a SquareSpace Support Expert or something? 

Where did you get this code?

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
12 hours ago, tuanphan said:

Where did you get this 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.

  1. https://www.w3schools.com/howto/howto_js_accordion.asp
  2. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

 

Edited by Radiance2022
Link to comment
On 2/21/2022 at 11:33 PM, Radiance2022 said:

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.

Hello

This should be easy to fix. The issue is that your "code" includes some HTML page elements that cannot exist twice on a webpage. They will be fine on a prototyping page within W3S or on Codepen, you cannot add these unique elements to a Squarespace page because it already contains them!

If you remove the first four lines (the document type, HTML tag, head tag and meta tag), and the last two lines (the closing body and HTML tags) you should be able to add the remaining code to a Code Block and it should work.

Of course, you'll need to be in a trial or on a Business Plan or above for code to work.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 weeks later...
On 2/26/2022 at 6:56 AM, paul2009 said:

Hello

This should be easy to fix. The issue is that your "code" includes some HTML page elements that cannot exist twice on a webpage. They will be fine on a prototyping page within W3S or on Codepen, you cannot add these unique elements to a Squarespace page because it already contains them!

If you remove the first four lines (the document type, HTML tag, head tag and meta tag), and the last two lines (the closing body and HTML tags) you should be able to add the remaining code to a Code Block and it should work.

Of course, you'll need to be in a trial or on a Business Plan or above for code to work.

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>

 

Link to comment
On 3/22/2022 at 6:28 AM, Radiance2022 said:

Can anyone resolve this issue?

Don't remove any code in your current code.

Edit Contact Page >> Add a Code Block > Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("button.accordion").click(function() {
  $(this).toggleClass('t-expand');
});
});
</script>
<style>
  button.accordion + embed {
    display: none;
}
  button.t-expand+embed {
    display: block !important;
    max-height: unset !important;
}
</style>

 

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
On 3/23/2022 at 4:32 AM, tuanphan said:

Don't remove any code in your current code.

Edit Contact Page >> Add a Code Block > Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("button.accordion").click(function() {
  $(this).toggleClass('t-expand');
});
});
</script>
<style>
  button.accordion + embed {
    display: none;
}
  button.t-expand+embed {
    display: block !important;
    max-height: unset !important;
}
</style>

 

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? 

Edited by Radiance2022
Link to comment
On 3/27/2022 at 10:37 AM, Radiance2022 said:

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? 

Can you keep the code? I can check easier

--

I usually use an Accordion Paid plugin to add more blocks into Accordion Content (Video, Code, Image, Gallery,..).

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.