Jump to content

Working code in CodePen not visible in Squarespace

Recommended Posts

Hello! 

I have this code that is displayed perfectly in CodePen, but when entered in Squarespace it is not visible. I have tried adjusting max height and width in my CSS with no success. Does this have to do with Squarespace or am I missing something. Code can be found below, and screenshots from Squarespace and Codepen.

Much appriciated if anyone can give me some input/help


HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sleep Quality Section</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="content-section">
  <div class="accordion">
    <div class="accordion-item" id="item1">
      <a class="accordion-link">01 Hantera inkommande data</a>
      <div class="description">
        <p>Varje chatt konversation har en början och ett slut, med frågor som inte kan besvaras utan att kolla i system. A-ZE överför data till processhanteringen för att leta upp relevant information.</p>
      </div>
    </div> <!-- Close accordion-item div -->

    <div class="accordion-item" id="item2">
      <a class="accordion-link">02 Kategorisering av förfrågan</a>
      <div class="description">
        <p>Vi låter AI kategorisera vad din fråga handlar om, samt vad du behöver svar på för att slussa assistenten vidare i rätt system.</p>
      </div>
    </div> <!-- Close accordion-item div -->

    <div class="accordion-item" id="item3">
      <a class="accordion-link">03 Hitta information i dina system</a>
      <div class="description">
        <p>I detta steg letar assistenten upp den begärda datan från tidigare steg. Detta kan exempelvis vara ordernummer i Shopify, en specifik ticket i Zendesk eller annan information som chattboten får använda.</p>
      </div>
    </div> <!-- Close accordion-item div -->

    <div class="accordion-item" id="item4">
      <a class="accordion-link">04 Formulering av svar</a>
      <div class="description">
        <p>Utifrån den datan som hittats i dina system, låter vi AI formulera ett relevant svar som kan skickas till användaren i chattboten.</p>
      </div>
    </div> <!-- Close accordion-item div -->

    <div class="accordion-item" id="item5">
      <a class="accordion-link">05 Hantera utgående data</a>
      <div class="description">
        <p>Användaren har fått svar på sin fråga via AI. En mailbekräftelse skickas också direkt via processflödet. All interaktionsdata sett till personuppgifter raderas därefter.</p>
      </div>
    </div> <!-- Close accordion-item div -->
  </div> <!-- Close accordion div -->
</div> <!-- Close content-section div -->

<script src="script.js"></script>
</body>
</html>

CSS
 

.content-section {
  font-family: 'Open Sans', Arial, sans-serif;
  background: #ffffff; /* Ensure the entire section has a white background */
  margin: 0;
  padding: 30px;
  font-size: 18px; /* Set the base font size for the content section */
}

.content-section .accordion {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

.content-section .accordion-item {
  /* If you had styles that were removed and they should be scoped, include them here */
}

.content-section .accordion-link {
  display: block;
  padding: 2rem;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  position: relative;
  border-bottom: 1px solid #ccc; /* Keep the grey line under the title */
  font-size: 20px; /* Apply the font size to the accordion link */
}

.content-section .accordion-link:hover,
.content-section .accordion-link:focus {
  background: #eaeaea;
}

.content-section .description {
  transition: max-height 0.5s ease, padding 0.5s ease;
  max-height: 0; /* Initially hide the content */
  overflow: hidden; /* Make sure content outside of max-height is not visible */
  padding: 0 2rem; /* Set padding to 0 on the top and bottom */
  line-height: 1.5;
  /* display: none; Remove this line */
  font-size: 16px; /* Adjusted the font size to match the image */
}


.content-section .description.open {
  max-height: 400px; /* Adjust if necessary */
  padding: 1rem 2rem; /* Adjusted the padding */
}

.content-section .accordion-item:target .description {
  display: block;
}

.content-section .accordion-link::after {
  content: '▼';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%); /* Center the arrow vertically */
  font-size: 18px;
  transition: transform 0.3s ease-in-out;
}

.content-section .accordion-item.active .accordion-link::after {
  transform: translateY(-50%) rotate(180deg); /* Flip the arrow when active */
}


JS
 

document.addEventListener('DOMContentLoaded', (event) => {
  const accordion = document.querySelectorAll('.accordion-link');

  accordion.forEach((link) => {
    link.addEventListener('click', (e) => {
      const currentDescription = e.target.nextElementSibling;

      if (currentDescription.style.maxHeight) {
        // Description is open, we need to close it
        currentDescription.style.maxHeight = null;
        currentDescription.style.paddingTop = '0';
        currentDescription.style.paddingBottom = '0';
        currentDescription.classList.remove('open');
      } else {
        // Description is closed, we need to open it
        currentDescription.style.maxHeight = currentDescription.scrollHeight + 'px';
        currentDescription.style.paddingTop = '1rem';
        currentDescription.style.paddingBottom = '1rem';
        currentDescription.classList.add('open');
      }

      // Optional: Close other descriptions
      document.querySelectorAll('.description').forEach((description) => {
        if (description !== currentDescription) {
          description.style.maxHeight = null;
          description.style.paddingTop = '0';
          description.style.paddingBottom = '0';
          description.classList.remove('open');
        }
      });

      e.preventDefault();
    });
  });
});

 

 

 

 

Skärmbild 2023-11-09 182027.png

Skärmbild 2023-11-09 182009.png

Link to comment

One problem might be that you have "view source code" checked on the code block, it won't run with that option, it will just display the code (as it is when I view the website).

Does the Squarespace accordion block not work for you?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy I just enabled it so that you can see the code there, but my screenshot shows the result with basic injection. 

The other coding block works fine that I have above, and it is pasted in a similar manner. That's why I am confused.

Just noticed though that accordion blocks are available, so I might use it instead, but these cannot be adjusted in terms of CSS and JS e.t.c? Correct? 

Link to comment
17 minutes ago, arminz10 said:

these cannot be adjusted in terms of CSS and JS e.t.c? Correct? 

You can adjust an accordion block with CSS or Javascript, how you do that depends on what you want to adjust.

19 minutes ago, arminz10 said:

The other coding block works fine that I have above, and it is pasted in a similar manner. That's why I am confused.

Copy-pasting code from codepen will sometime work, but not always. There's also not necessarily any consideration for classes and IDs that may already exist on your website in any given codepen so there's always a chance of a conflict because of that which may cause it not to run. Codepen also has the libraries for javascript loaded, but Squarespace likely doesn't have that, so you may need to add that. It also could be that the scripts need to go into the page header code injection rather than a code block.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.