Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Accordions
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start (Note if is not need so remove)**/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #000;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.cw-fix {
	max-width:700px !important;
	margin: auto;
	width: 100%;
padding:40px 0px;
}
/**Typeo CSS End (Note if is not need so remove)**/
.cw-section {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.cw-section__title {
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 0px;
}

.cw-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
}
.cw-accordion__item {
  padding: 1rem;
  background: #e5e5e5;
  position: relative;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
}
.cw-accordion__item .cw-label { 
  padding-right: 20px; 
  font-size: 20px; 
  position: relative;
  width: 100%;
  display: inline-block;
}
.cw-accordion__item .cw-label:after {
    position: absolute;
    right: 0;
    content: "+";
    font-size: 24px;
    top: -2px;
}
.cw-accordion__item .cw-label.cw-open:after {
  content: "−";
}
.cw-accordion__item .cw-acordion-cont {
  height: 0px;
  overflow: hidden;
  transition: 0.4s;
  -webkit-transition: 0.4s;
}
.cw-accordion__item .cw-open + .cw-acordion-cont {
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}
JS
let items = document.querySelectorAll(".cw-accordion .cw-accordion__item .cw-label");
items.forEach(function (t) {
t.addEventListener("click", function (e) {
 items.forEach(function (e) {
 e !== t || e.classList.contains("cw-open")
 	? e.classList.remove("cw-open")
 	: e.classList.add("cw-open");
 });
});
});

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *