How Do I Recreate This Toggle In Css?

I'm trying to recreate this toggle in CSS/HTML and JavaScript. When closed the toggle shows the title: 'Stap 2 Implementatie in de organisatie' and an icon (circle with a plus in i

Solution 1:

You can try it like this, I have explained the changes in comments.

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";
    }
  });
}

.accordion {
  background-color: #7d206a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
  font-family: 'Dosis';
  border-radius: 20px; /* You can have border-radius on all sides */
}

.accordion.active {
  border-bottom-left-radius: 0px; /* You can set the border-radius of bottom part to 0 */border-bottom-right-radius: 0px;
}

.icon {
  float: right;
  height: 30px; /* Define height and width for the icon */width: 30px;
  background-image: url("https://i.stack.imgur.com/Vvuj2.png"); /* Image for the closed panel */
}

.active.icon {
  /* Icon for the active panel */background-image: url("https://i.stack.imgur.com/ZAR5V.png");
}

.header {
  color: #45b072;
}

.active,
.accordion:hover {
  background-color: #7d206a;
}

p {
  color: #fff;
  font-family: 'Dosis';
}

.panel {
  padding: 018px;
  display: none;
  background-color: #7d206a;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.green-content { /* Properties for the new content */display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four columns for your content as per image */background: #45b072;
  margin: 0 -18px; /* Negative margin so that the parent padding doesn't affect it */margin-top: 10px;
  padding: 18px; /* Same padding as parent */color: white;
}

<h2>Accordion</h2><buttonclass="accordion"><spanclass="header">Stap 2</span> Implementatie in de organisatie<spanclass="icon"></span></button><divclass="panel"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><divclass="green-content"><!-- Extra content added --><divclass="column-1">
      Content
    </div><divclass="column-2">
      Content
    </div><divclass="column-3">
      Content
    </div><divclass="column-4">
      Content
    </div></div></div>

Solution 2:

There are probably a lot of takes for this opinion but I think you should ditch the panel.style.dipslay and use class approach instead. So the gist of it is that you add an open state class to the wrapper and based on that you do stuff. I have set it up a bit for you so you can use the class accordion-container--is-open to do stuff with your css when the accordion is open

var accordions = document.querySelectorAll(".accordion-container");

accordions.forEach(element => {
  const toggler = element.querySelector('.accordion')
  toggler.addEventListener('click', function() {
    element.classList.toggle('accordion-container--is-open')
  })
})

.accordion {
  display: flex;
  align-items: center;
  background-color: #7d206a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
  font-family: 'Dosis';
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.icon {
  margin-left: auto;
}

.accordion-container--is-open.icon {
  color: aqua;
}

.header {
  color: #45b072;
}

.active,
.accordion:hover {
  background-color: #7d206a;
}

p {
  color: #fff;
  font-family: 'Dosis';
}

.panel {
  display: none;
  background-color: #7d206a;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.panel > * {
  padding: 018px;
}

.accordion-container--is-open.panel {
  display: block;
}

.accordion__footer {
  display: flex;
  align-items: center;
  height: 4rem;
  background-color: lime;
}

.accordion__footer-icon {
  width: 2rem;
  height: 2rem;
  background-color: aqua;
}

<h2>Accordion</h2><divclass="accordion-container"><buttonclass="accordion"><spanclass="header">Stap 2</span> Implementatie in de organisatie<spanclass="icon">icon</span></button><divclass="panel"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><divclass="accordion__footer"><spanclass="accordion__footer-icon">1</span><spanclass="accordion__footer-icon">2</span><spanclass="accordion__footer-icon">3</span></div></div></div>

Solution 3:

Have a play with this

I use delegation and content. You can change content for background image

const container = document.getElementById("container");

container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("icon")) {
    const button = tgt.closest("button");
    tgt.classList.toggle("open");
    const close = !tgt.classList.contains("open");
    tgt.classList.toggle("close",close);
    const  panel = button.nextElementSibling;
    panel.classList.toggle("hide",!close)
  }
})

.accordion {
  background-color: #7d206a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
  font-family: 'Dosis';
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.icon {
  float: right;
  display: inline-block;
  width: 50px;
}

.icon.open::after {
  content: "⭕"
}

.icon.close::after {
  content: "❌"
}

.header {
  color: #45b072;
}

.active,
.accordion:hover {
  background-color: #7d206a;
}

p {
  color: #fff;
  font-family: 'Dosis';
}

.panel {
  padding: 018px;
  background-color: #7d206a;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.hide { display: none;}

<h2>Accordion</h2><divid="container"><buttonclass="accordion"><spanclass="header">Stap 2</span> Implementatie in de organisatie<spanclass="icon open"></span></button><divclass="panel hide"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>