Accordion tabs

In this example below you will see how to do a Accordion tabs with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lauraMM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lauraMM ©
  • HTML
  • CSS
  • JavaScript
        <div class="tabs">

	    <input type="radio" name="tabs" id="tab1" checked >
	    <label for="tab1">
	        <i class="fa fa-user-circle"></i><span>Empresas</span>
	    </label>

	    <input type="radio" name="tabs" id="tab2">
	    <label for="tab2">
	        <i class="fa fa-user-circle"></i><span>Autónomos</span>
	    </label>

	    <input type="radio" name="tabs" id="tab3">
	    <label for="tab3">
	        <i class="fa fa-user-circle"></i><span>Asesores</span>
	    </label>

	    <div id="tab-content1" class="tab-content">
	        <h2>Si representas una empresa...</h2>
	       

<div class="container-accordion">
<ul>
			  <li>
				<input type="checkbox" checked>
				<i></i>
				<h3>qué está empezando</h3>
				
							<p class="content lista-circulo">
							<ol>
								<li>Obtén el <a href="http://www.seg-social.es/Internet_1/Empresarios/Inscripcion/Servicios/Modelosdesolicitudd31193/ModeloTA6Solicitudd48532/index.htm" target="_blank" rel="noopener">modelo TA-6</a> de <em>Solicitud de inscripción en el sistema de la Seguridad Social de la Tesorería General de la Seguridad Social</em> y rellenar la casilla <em>“Entidad de Accidentes de Trabajo y Enfermedades Profesionales”</em> (7.1) indicando “151” en el campo de número y “Asepeyo” en el de denominación.Si deseas cubrir la incapacidad temporal por contingencias comunes con Asepeyo, deberás marcar con una “X” la casilla “Mutua” del apartado 7.2.</li>
								<li>Entrega el TA-6 junto al resto de documentación necesaria en la Tesorería General de la Seguridad Social.</li>
							</ol>
							</p>



			  </li>
			  
			  
			  
			  <li>
				<input type="checkbox" checked>
				<i></i>
				<h3>qué está asociada a otra mutua</h3>
				<p class="content lista-circulo">
							<ol>
								<li>Obtén el <a href="http://www.seg-social.es/Internet_1/Empresarios/Inscripcion/Servicios/Modelosdesolicitudd31193/ModeloTA6Solicitudd48532/index.htm" target="_blank" rel="noopener">modelo TA-6</a> de <em>Solicitud de inscripción en el sistema de la Seguridad Social de la Tesorería General de la Seguridad Social</em> y rellenar la casilla <em>“Entidad de Accidentes de Trabajo y Enfermedades Profesionales”</em> (7.1) indicando “151” en el campo de número y “Asepeyo” en el de denominación.Si deseas cubrir la incapacidad temporal por contingencias comunes con Asepeyo, deberás marcar con una “X” la casilla “Mutua” del apartado 7.2.</li>
								<li>Entrega el TA-6 junto al resto de documentación necesaria en la Tesorería General de la Seguridad Social.</li>
							</ol>
							</p>
			  </li>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h3>asociada al INSS</h3>
    <p class="content lista-circulo">
							<ol>
								<li>Obtén el <a href="http://www.seg-social.es/Internet_1/Empresarios/Inscripcion/Servicios/Modelosdesolicitudd31193/ModeloTA6Solicitudd48532/index.htm" target="_blank" rel="noopener">modelo TA-6</a> de <em>Solicitud de inscripción en el sistema de la Seguridad Social de la Tesorería General de la Seguridad Social</em> y rellenar la casilla <em>“Entidad de Accidentes de Trabajo y Enfermedades Profesionales”</em> (7.1) indicando “151” en el campo de número y “Asepeyo” en el de denominación.Si deseas cubrir la incapacidad temporal por contingencias comunes con Asepeyo, deberás marcar con una “X” la casilla “Mutua” del apartado 7.2.</li>
								<li>Entrega el TA-6 junto al resto de documentación necesaria en la Tesorería General de la Seguridad Social.</li>
							</ol>
							</p>
  </li>
</ul>
</div>










	    </div> <!-- #tab-content1 -->

	    <div id="tab-content2" class="tab-content">
	        <h3>CSS3 Snippets</h3>
	        <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>

	    </div> <!-- #tab-content2 -->

	    <div id="tab-content3" class="tab-content">
	        
	        <h3>jQuery</h3>
	        <p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</p>

	    </div> <!-- #tab-content3 -->

	</div> <!-- .tabs -->
    

/*Downloaded from https://www.codeseek.co/lauraMM/accordion-tabs-qoBNqY */
        .single-asepeyo_faqs .grid-container {
    max-width: 1600px!important;
}

.tabs {
    max-width: 100%;
    float: none;
    list-style: none;
    padding: 0;
    margin: 75px auto;
    border-bottom: 4px solid #ccc;
}
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
.tabs input[type=radio] {
    display:none;
}
.tabs label {
    display: block;
    float: left;
    width: 33.3333%;
    color: #ccc;
    font-size: 30px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    line-height: 2;
    cursor: pointer;
    box-shadow: inset 0 4px #ccc;
    border-bottom: 4px solid #ccc;
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
    transition: all 0.5s;
}
.tabs label span {
    display: none;
}
.tabs label i {
    padding: 5px;
    margin-right: 0;
}
.tabs label:hover {
    color: #3498db;
    box-shadow: inset 0 4px #3498db;
    border-bottom: 4px solid #3498db;
}
.tab-content {
    display: none;
    width: 100%;
    float: left;
    padding: 15px;
    box-sizing: border-box;
    background-color:#ffffff;
}
.tab-content * {
    -webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
    transform: scale(0.9);
    opacity: 0;
    }
  50% {
    transform: scale(1.01);
    opacity: 0.5;
    }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.tabs [id^="tab"]:checked + label {
    background: #FFF;
    box-shadow: inset 0 4px #3498db;
    border-bottom: 4px solid #3498db;
    color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
    display: block;
}
@media (min-width: 768px) {
    .tabs i {
        padding: 5px;
        margin-right: 10px;
    }
    .tabs label span {
        display: inline-block;
    }
    .tabs {
    max-width: 100%;
    margin: 50px auto;
    }
}




/*Accordion*/

.transition, .container-accordion p, .container-accordion ul li i:before, .container-accordion ul li i:after {
  transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
  animation: flipdown 0.5s ease both;
}

.container-accordion ul li {
  animation: flipdown 0.5s ease both;
}

.no-select, .container-accordion h3 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.container-accordion {
  min-height: 0;
  display: inline-block;
  position: relative;
  left: 50%;
  margin: 90px 0;
  transform: translate(-50%, 0);
  box-shadow: 0 10px 0 0 #ff6873 inset;
  background-color: #fefffa;
  max-width: 90%;
  padding: 30px;
}
@media (max-width: 550px) {
.container-accordion {
    box-sizing: border-box;
    transform: translate(0, 0);
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    left: 0;
  }
}





.container-accordion h3 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  background-color: #fefffa;
  margin: 0;
  cursor: pointer;
}

.container-accordion p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2;
}

.container-accordion ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.container-accordion ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.container-accordion ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.container-accordion ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.container-accordion ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.container-accordion ul li:last-of-type {
  padding-bottom: 0;
}
.container-accordion ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.container-accordion ul li i:before, .container-accordion ul li i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}
.container-accordion ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.container-accordion ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.container-accordion ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.container-accordion ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.container-accordion ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.container-accordion ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

    

/*Downloaded from https://www.codeseek.co/lauraMM/accordion-tabs-qoBNqY */
        
    

Comments