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

Back to Accordions
Preview Source Code
Download
HTML
CSS
@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-accordion-main {
 max-width: 700px;
 padding: 30px;
 width: 100%;
 margin: auto;
 background-color: #fff;
}

.cw-accordion-main .cw-acc-item {
 width: 100%;
 border-top: #dbdbdb 1px solid;
}

.cw-accordion-main .cw-acc-item:first-child {
 border-top: none;
}

.cw-accordion-main .cw-acc-item .cw-acc-label {
 cursor: pointer;
 padding: 0px 20px 0px 25px;
 margin: 12px 0px;
 display: inline-block;
 width: 100%;
 position: relative;
 font-size: 20px;
 transition: all 0.5s;
}

.cw-accordion-main .cw-acc-item .cw-acc-label:before {
 content: '';
 position: absolute;
 left: 0px;
 top: 14px;
 width: 14px;
 height: 2px;
 background-color: #000;
 transition: all 0.5s;
}

.cw-accordion-main .cw-acc-item .cw-acc-label:after {
 content: '';
 position: absolute;
 left: 6px;
 top: 8px;
 width: 2px;
 height: 13px;
 background-color: #000;
 transition: all 0.5s;
}

.cw-accordion-main .cw-acc-itemshow .cw-acc-label:after {
 opacity: 0;
}

.cw-accordion-main .cw-acc-item .cw-acc-cont {
 display: none;
 padding: 8px 20px 8px 25px;
}

.cw-acc-cont h3 {
 margin-top: 0px;
}

.cw-accordion-main .cw-acc-itemshow .cw-acc-cont {
 display: block;
}
@media(max-width:992px) {
 .cw-accordion-main {
  padding: 15px;
 }

 .cw-accordion-main .cw-acc-item .cw-acc-label {
  font-size: 18px;
 }
}
JS
 var accordions = document.querySelectorAll('.cw-acc-item .cw-acc-label');
  function accordion(){
  	document.querySelectorAll('.cw-acc-item').forEach(sibEl => {
  		if (!sibEl.isEqualNode(this.parentElement)) {
  			sibEl.classList.remove('cw-acc-itemshow');
  		}
  	});
  	if (Array.from(this.parentElement.classList).indexOf('cw-acc-itemshow') != -1) {
  		this.parentElement.classList.remove('cw-acc-itemshow');
  	} else {	
  		this.parentElement.classList.add('cw-acc-itemshow');
  	}
  }
accordions.forEach(acc => {
	acc.addEventListener('click', accordion)
});

Related Snippets

Leave a comment

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