endurain
4/2/2019 - 5:51 PM

All the code required to build an accordion section without JS. Notes: .faq-container: .container is a common class name, and likely this w

All the code required to build an accordion section without JS. Notes: .faq-container: .container is a common class name, and likely this will need to be changed, hence the added '.faq' Copy and paste the

to add another accordio

accordion
content_copyfile_download
<style>
/*New FAQ CSS @En*/
.faq-container h1 {
  text-align: center;
  font-size: 3em;
  letter-spacing: 1px;
}
.toggle {
  display: none;
}
.faq-container .option {
  position: relative;
  margin-bottom: 1em;
}
.faq-container .title,
.faq-container .content {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.2s;
}
.faq-container .title {
  background:rgba(6, 0, 70, 1);
  padding: 1em 3em 1em 1em;
  display: block;
  color: #fff;
  font-weight: bold;
}
.faq-container .title:after, .faq-container .title:before {
  content: '';
  position: absolute;
  right: 1.25em;
  top: 1.25em;
  width: 2px;
  height: 0.75em;
  background-color: #fff;
  transition: all 0.2s;
}
.faq-container .title:after {
  transform: rotate(90deg);
}
.faq-container .content {
  max-height: 0;
  overflow: hidden;
  background-color: #fff;
}
.faq-container .content p {
    margin: 0;
    padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;
		padding:1.5em;
  }
	.toggle:checked + .title, .toggle:checked + .title + .content {
	  /* box-shadow: 3px 3px 6px #ddd, -3px 3px 6px #ddd; */
	}
	.toggle:checked + .title + .content {
	  max-height: 500px;
	}
	.toggle:checked + .title:before {
	  transform: rotate(90deg) !important;
	}
</style>

	<div class="faq-container">
	
			<h1 style="color:rgba(165, 4, 4, 1);">Page Text Here</h1>
			
			<div class="option">
	      <input type="checkbox" id="toggle1" class="toggle" />
	      <label class="title" for="toggle1">Title Text Here</label>
	      <div class="content">
	        <p>Text Here</p>
	      </div>
	    </div>