I had added accordion with in the theme file but not working

Shopify Discussion
1

Hi,

This is the store URL
URL: https://8zlcfgy6aytaai6q-62961188937.shopifypreview.com

password: 021

I am using the Kalles theme and want to add accordion functionality to the banner section in the theme editor. I have used JavaScript, CSS, and custom HTML code, but it is not executing properly. Could you please suggest a solution? I will also provide the code I used.

Javascript

Code 1
<script>
function toggleAccordion(header) {
  header.classList.toggle("active");
  var content = header.nextElementSibling;
  if (content.style.display === "block") {
    content.style.display = "none";
  } else {
    content.style.display = "block";
  }
}
</script>

Code 2
  <script>

function initializeAccordion() {
  $('.accordion-header').off('click').on('click', function() {
    $(this).toggleClass('active');
    $(this).next('.accordion-content').slideToggle();
  });
}
$(document).on('shopify:section:load', function() {
  initializeAccordion(); 
});
$(document).ready(function() {
  initializeAccordion();
});
</script>

CSS style code

<style>
.accordion-item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f1f1f1;
  cursor: pointer;
  padding: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
  background-color: #fff;
}

.accordion-content p {
  margin: 0;
}

.accordion-header.active + .accordion-content {
  display: block;
}
</style>

HTML code

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Accordion Title 1</h3>
    </div>
    <div class="accordion-content" style="display: none;">
      <p>This is the content of accordion 1.</p>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Accordion Title 2</h3>
    </div>
    <div class="accordion-content" style="display: none;">
      <p>This is the content of accordion 2.</p>
    </div>
  </div>
</div>

using this code with in this section of the page

usmekhan91_0-1726468320768.png
usmekhan91_0-1726468320768.png1920×921 49.6 KB

The accordion functionality is not available in this section but wanted to add it within this section

usmekhan91_1-1726468394632.png
usmekhan91_1-1726468394632.png1920×958 152 KB

I would appreciate it if you can help me in this regards,

2

Hi! Thank you for providing the code and store URL. I’ll review the JavaScript, CSS, and HTML code you’ve used for the accordion functionality in the Kalles theme’s banner section.

Initial observations:

  1. Conflicting JavaScript codes (Code 1 and Code 2). Choose one approach.
  2. Missing jQuery library reference (required for Code 2).
  3. Potential CSS specificity issues.

To troubleshoot, I’ll need more information:

  1. Which code snippet are you using currently?
  2. Are there any console errors in the browser?
  3. Can you provide a screenshot of the desired accordion layout?

I’ll provide a detailed solution once I understand the issues better. I am using kadence o

for my website as its lightweight and speedy.