Jump to content

Every other accordion block refuses to open

Recommended Posts

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! 

Link to comment
  • Replies 3
  • Views 133
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.  

Link to comment

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.

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.