This html accordion code will fire up a fantastic accordion with smooth animation a small image, if you choose to use it, on each of the heading sections.

Simply paste the code below and adjust as needed!

This will work in WordPress pagebuilders such as Breakdance and Bricks (if you use code blocks) or in Etch. If you’re using desktop coding, this is perfect for use in FEWD Studio.

HTML

<div class="custom-accordion-wrapper">

  <div class="accordion-item">
    <div class="accordion-header">
      <div class="header-left">
        <img class="industry-icon" src="images/sector-image-1.jpg" alt="icon">
        <span class="title">Accordion Title 1</span>
      </div>
      <div class="accordion-caret"></div>
    </div>
    <div class="accordion-content">
      <div class="content-inner">
        <img class="main-image" src="images/sector-image-1.jpg" alt="Accordion Title 1">
        <h3>Accordion Title 1</h3>
        <p>Lots of great information in here.</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <div class="header-left">
        <img class="industry-icon" src="images/sector-image-2.jpg" alt="icon">
        <span class="title">Accordion Title 2</span>
      </div>
      <div class="accordion-caret"></div>
    </div>
    <div class="accordion-content">
      <div class="content-inner">
        <img class="main-image" src="images/sector-image-2.jpg" alt="Accordion Title 2">
        <h3>Accordion Title 2</h3>
        <p>Lots of great information in here.</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <div class="header-left">
        <img class="industry-icon" src="images/sector-image-3.jpg" alt="icon">
        <span class="title">Accordion Title 3</span>
      </div>
      <div class="accordion-caret"></div>
    </div>
    <div class="accordion-content">
      <div class="content-inner">
        <img class="main-image" src="images/sector-image-3.jpg" alt="Accordion Title 3">
        <h3>Accordion Title 3</h3>
        <p>Lots of great information in here.</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <div class="header-left">
        <img class="industry-icon" src="images/sector-image-4.jpg" alt="icon">
        <span class="title">Accordion Title 4</span>
      </div>
      <div class="accordion-caret"></div>
    </div>
    <div class="accordion-content">
      <div class="content-inner">
        <img class="main-image" src="images/sector-image-4.jpg" alt="Accordion Title 4">
        <h3>Accordion Title 4</h3>
        <p>Lots of great information in here.</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <div class="accordion-header">
      <div class="header-left">
        <img class="industry-icon" src="images/sector-image-5.jpg" alt="icon">
        <span class="title">Accordion Title 5</span>
      </div>
      <div class="accordion-caret"></div>
    </div>
    <div class="accordion-content">
      <div class="content-inner">
        <img class="main-image" src="images/sector-image-5.jpg" alt="Accordion Title 5">
        <h3>Accordion Title 5</h3>
        <p>Lots of great information in here.</p>
      </div>
    </div>
  </div>

</div>

CSS

.custom-accordion-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.accordion-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease;
}

.accordion-header:hover {
  background: #f8fafc;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.industry-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.title {
  font-weight: 600;
  font-size: 1.1rem;
}

.accordion-caret {
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(-45deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 5px;
}

.accordion-item.is-active .accordion-caret {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.accordion-item.is-active .accordion-content {
  max-height: 1500px;
  opacity: 1;
}

.content-inner {
  padding: 0 20px 30px 20px;
}

.main-image {
  width: 300px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 20px;
}

JS

const items = document.querySelectorAll(‘.accordion-item’);

items.forEach(item => {
const header = item.querySelector(‘.accordion-header’);

header.addEventListener(‘click’, () => {
// Check if it’s already open
const isActive = item.classList.contains(‘is-active’);

// Close all others
items.forEach(el => el.classList.remove('is-active'));

// If it wasn't open, open it
if (!isActive) {
  item.classList.add('is-active');
}

});
});