Code for Nested Accordion Not Working Properly

Hi everyone. I am not a programmer. I'm just a regular guy trying to redesign/refresh my current websites with urgency. I've done a lot of research trying to find a plug-in for nested accordions in Squarespace 7.1. That was unsuccessful but I did find an example from CSS CodeLab with code provided in CodePen. There is no mention of compatibility with Squarespace or any other platform. You can view the code and the accordion it outputs at:

https://codepen.io/Sugarme/pen/WdpwbW)

I copied the HTML code and inserted it into a Code block on my page. I copied the CSS code and inserted it into the Custom CSS box in the Website Tools section. There is no other code in the Custom CSS box. The HTML and CSS code provided does not generate the accordion as it appears on the CodePen page. I've attached a screenshot of how it appears on the CodePen page (see link above) and a screen shot of how it appears on my page.

The CSS code provided starts with the following 2 lines:

@import "compass/css3";

// only for presentation purposes

I do have a very basic/limited knowledge of HTML and CSS and assumed that some of the code was generic and just needed to be tweaked to include specific Class or ID references. Is the issue that the code is not compatible with Squarespace, or that there is generic code needs to be replaced with specific code?

Time is of the essence. Please help! Thank you.

can you share your site? if it's private set it to password protected. We'd have to see how the code is set up live on your site to check out whats going on.

Thanks for the quick response. As I mentioned above, all I did was follow the developer's link to a page on CodePen that already had his CSS and HTML code generated. Then I copied the CSS and pasted it into the Custom CSS panel. I copied and pasted the HTML into a code block in a blank section on a blank page. I have no other code in the Custom CSS panel, any of the Code Injection panels, or any of the Advanced code panels of individual pages.

As a starting point, my primary question/concern is regarding the fact that the first 2 lines of code generated begins with:

@import "compass/css3";

// only for presentation purposes

Those 2 lines lead me to believe something has been intentionally deleted so that the code can't be used, or  site specific code needs to be added somewhere. Sorry if I did not make myself clear. Could you please start by looking at the CodePen page using the link initially provided to determine if the code is incomplete or not? There's not a lot of code. It seems fairly basic. If the code appears complete with no intentional or accidental errors, we can delve into my site but that seems futile at this point since I don't have any other custom CSS or HTML on my site that should be interfering.

Thank you.

The code is totally complete on their codepen but I don't think it'll just work out of the box in a code block, which is why if you share your page link we can see what parts aren't working or in the worst case (which has happened before) it was copied and pasted missing something like a quotation mark, bracket, semicolon, etc.

Typically in these forums many of us have an easier time looking at your specific problem if we're looking at what you're talking about live on your site. The other reason this is helpful for us is that I would probably just have to make my own page and install this person's code to try it out which ends up being more work for helpers in the community.

Your reasoning definitely makes sense. Luckily, I was able to determine the problem. The CSS needed a block ID for the accordion. Once added to the CSS, the nested accordion displayed and functioned as the developer intended. Though, I definitely have to customize it and am certain I will need assistance setting the proper widths, margins, etc....in addition to any mobile-related issues that may arise. Thank you for your time.