Comunidad de diseño web y desarrollo en internet online

Como cerrar un acordeón JQuery

Citar            
MensajeEscrito el 08 Sep 2016 03:22 pm
Hola queridos amigazos, escribo para pedirles ayuda...

He llegado recien a un trabajo y debo terminar una web. En esta hay una suerte de acordeón que muestra textos. Este funciona, pero no se como hacer para que cuando pinchen de nuevo el boton que activo el acordeon este se cierre.

Adjunto codigos:

HTML
<div class="row acc1">
<div class="col-md-4 acordeonadoUno">
<img src="images/iconos/labcore_1.png"> MIDDLEWARE AUTOVALIDACIÓN
</div>
<div class="col-md-4 acordeonadoDos">
<img src="images/iconos/labcore_2.png"> GENERACIÓN DE REPORTES INTERNOS
</div>
<div class="col-md-4 acordeonadoTres">
<img src="images/iconos/labcore_3.png"> IDENTIFICACIÓN Y REPORTE DE MUESTRAS
</div>
<div class="col-md-12 acordeonado">
<div class="col-md-12 acordeonadoA">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="col-md-12 acordeonadoB">
<p>Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="col-md-12 acordeonadoC">
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div class="col-md-4 acordeonadoCuatro">
<img src="images/iconos/labcore_4.png"> GENERACIÓN DE ESTADÍSTICAS REM
</div>
<div class="col-md-4 acordeonadoCinco">
<img src="images/iconos/labcore_5.png"> INTEGRACIÓN CONTROL DE CALIDAD
</div>
<div class="col-md-4 acordeonadoSeis">
<img src="images/iconos/labcore_6.png"> MÓDULO CONSULTA WEB
</div>

<div class="col-md-12 acordeonado2">


<div class="col-md-12 acordeonadoD">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="col-md-12 acordeonadoE">
<p>Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="col-md-12 acordeonadoF">
<p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

</div>

</div>

CSS
.acc1{background:#07C2C5;color:white}
.acc2{background:#DF6869; color:white}
.acc3{background:#DFB700; color:white}
.acordeonado, .acordeonado2{display:none;height:0vh; width:100%; color:white}
.acordeonadoA, .acordeonadoB, .acordeonadoC, .acordeonadoD, .acordeonadoE, .acordeonadoF{display:none; padding:3%}
.acordeonadoUno, .acordeonadoDos, .acordeonadoTres, .acordeonadoCuatro, .acordeonadoCinco, .acordeonadoSeis{padding:1.5% 1%; cursor:pointer;font-family: 'Franklin Gothic Demi' !important; font-size:21px}

.acordeonadoUno img, .acordeonadoDos img, .acordeonadoTres img, .acordeonadoCuatro img, .acordeonadoCinco img, .acordeonadoSeis img{width:5%}

JQuery
$( document ).ready(function() {
$(".acordeonadoUno, .acordeonadoDos, .acordeonadoTres").click(function(){
$(".acordeonado").show(0).animate({"height" :"20vh"},{duration: 1200})
$(".acordeonado2").animate({"height" :"0"},{duration: 600}).hide(0)
})
$(".acordeonadoUno").click(function(){
$(".acordeonadoA").show(0).animate({"height" :"auto"},{duration: 1200})
$(".acordeonadoB, .acordeonadoC").hide(0)
})
$(".acordeonadoDos").click(function(){
$(".acordeonadoA, .acordeonadoC").hide(0)
$(".acordeonadoB").show(0).animate({"height" :"auto"},{duration: 1200})
})
$(".acordeonadoTres").click(function(){
$(".acordeonadoA, .acordeonadoB").hide(0)
$(".acordeonadoC").show(0).animate({"height" :"auto"},{duration: 1200})
})

$(".acordeonadoCuatro, .acordeonadoCinco, .acordeonadoSeis").click(function(){
$(".acordeonado2").show(0).animate({"height" :"20vh"},{duration: 1200})
$(".acordeonado").animate({"height" :"0"},{duration: 600}).hide(0)
})
$(".acordeonadoCuatro").click(function(){
$(".acordeonadoD").show(0).animate({"height" :"auto"},{duration: 1200})
$(".acordeonadoE, .acordeonadoF").hide(0)
})
$(".acordeonadoCinco").click(function(){
$(".acordeonadoD, .acordeonadoE").hide(0)
$(".acordeonadoE").show(0).animate({"height" :"auto"},{duration: 1200})
})
$(".acordeonadoSeis").click(function(){
$(".acordeonadoD, .acordeonadoE").hide(0)
$(".acordeonadoF").show(0).animate({"height" :"auto"},{duration: 1200})
})

});

Por exelord

11 de clabLevel



Genero:Masculino  

Santiago de Chile

chrome
Citar            
MensajeEscrito el 15 Sep 2016 02:22 pm
no se que tienes tu ahi en codigo, toma este que te hice, modificalo a tu gusto... esta mucho mas limpio

Código :

<button type="button" data-action="open-acordeon" data-rel="1">Abre acordeon 1</button>
<button type="button" data-action="open-acordeon" data-rel="2">Abre acordeon 2</button>
<button type="button" data-action="open-acordeon" data-rel="3">Abre acordeon 3</button>
<button type="button" data-action="open-acordeon" data-rel="4">Abre acordeon 4</button>

<div id="acordeon_body">
    <div id="acordeon1" data-acordeon="1">
        <div class="title"><!-- titulo --></div>
        <div class="container" style="display: none">
            <!-- Contenido -->
        </div>
    </div>
    <div id="acordeon2" data-acordeon="2">
        <div class="title"><!-- titulo --></div>
        <div class="container" style="display: none">
            <!-- Contenido -->
        </div>
    </div>
    <div id="acordeon3" data-acordeon="3">
        <div class="title"><!-- titulo --></div>
        <div class="container" style="display: none">
            <!-- Contenido -->
        </div>
    </div>
    <div id="acordeon4" data-acordeon="4">
        <div class="title"><!-- titulo --></div>
        <div class="container" style="display: none">
            <!-- Contenido -->
        </div>
    </div>
</div>

<script>
    $('[data-action="open-acordeon"]').click(function(event) {
        var acordeonRel = $(this).attr('data-rel'); // captura el valor del attributo "data-rel"
        var acordeonContainer = $('[data-acordeon='+acordeonRel+']').find('.container'); // captura el elemento de con clase container segun la relacion
        if (acordeonContainer.hasClass('active')) { // si ese elemento tiene la clase "active"
            acordeonContainer.slideUp('slow').removeClass('active'); // lo oculta
        }else{
            acordeonContainer.slideDown('slow').addClass('active'); // lo muestra
        }
    });
</script>

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.