<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>accordeón</title>
<style>
*{box-sizing:border-box;} .faq{ width:500px;
border:1px solid #0000ff;
}
.title-tab{ padding:16px 8px;
background-color:#0000ff;
color:#fff;
border:1px solid #fff;
}
.title-tab i{ margin:8px;
}
.content-tab{ padding:32px 8px;
}
.d-none{ display:none;
}
</style>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="faq">
<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 1</div>
<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ut eligendi nisi cum obcaecati beatae.</div>
<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 2</div>
<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti aspernatur necessitatibus veniam, animi dolor!</div>
<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 3</div>
<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est praesentium ipsa enim, culpa facilis sunt!</div>
<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 4</div>
<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur, explicabo dolores, beatae tenetur sunt.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $(".content-tab:not(:eq(0))").toggle(); $(".title-tab i").toggleClass("fa-plus");
$(".title-tab").click(function(){ $(".content-tab").hide(100); $(".title-tab i").removeClass("fa-minus"); $(".title-tab i").addClass("fa-plus"); $(this).next().show(400);
$(this).children().addClass("fa-minus"); })
})
</script>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 20200406 (0)
No hay comentarios