18/09/2016, 14:44
|
| |
| Desplegables
Hola,
estoy intentando hacer un desplegable y me sale bien. El problema está cuando agrego otro elemento pues al hacer click para que despliegue en cualquiera de ellos despliegan todos y no uno sólo, alguien sabe cómo se podría hacer para que sólo desplegara en el que se haga click? Mi código es:
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
#section_faqs1 .items_container{
display:none;
}
#section_faqs1 h3::after{
font-family: FontAwesome;
content:"\f105";
margin-left: 5px;
}
.icon-close::after{
font-family: FontAwesome;
content:"\f107" !important;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="row section" id="section_faqs1">
<div class="col-md-12">
<h3 class="section_title">Preguntas Frecuentes</h3>
</div>
<div class="items_container faqs text-center">
<div class="col-md-4 col-sm-6">
<div class="item">
<h6 class="title">hola</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<h6 class="title">hola</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<h6 class="title">hola</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
</div>
</div>
<div class="col-md-12">
<h3 class="section_title">Preguntas Frecuentes2</h3>
</div>
<div class="items_container faqs text-center">
<div class="col-md-4 col-sm-6">
<div class="item">
<h6 class="title">hola</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<h6 class="title">hola</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="item">
<h6 class="title">hola</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#section_faqs1 h3').on('click', function(){
$(this).toggleClass('icon-close');
$('#section_faqs1 .items_container').slideToggle('slow').css('display', 'inline-block');
});
});
</script>
</body>
</html>
Un saludo!!! |