[SOLUCIONADO] Cerrar pestaña de acordeón

[ceaped]

Buenos días
Tengo este código que es de un efecto de acordeón:

Código Javascript:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var animTime = 300,
clickPolice = false;
  
$(document).on('touchstart click', '.acc-btn', function(){
if(!clickPolice){
clickPolice = true;
      
var currIndex = $(this).index('.acc-btn'),
targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
   
$('.acc-btn h1').removeClass('selected');
$(this).find('h1').addClass('selected');
      
$('.acc-content').stop().animate({ height: 0 }, animTime);
$('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
 
setTimeout(function(){ clickPolice = false; }, animTime);
}
    
});
  
});
</script>
 

Él abre la pestaña bien.
¿Cómo hago para abrir y cerrar la pestaña?

Gracias por su ayuda

[ceaped]

Intento así pero no me hace nada:

Código Javascript:

$(document).on('touchstart click', '.acc-btn', function(){
if(!clickPolice){
clickPolice = true;
}
 
if(clickPolice = true){
$('.acc-btn h1').removeClass('selected');
}
 

[ceaped]

Intento de esta manera pero cuando doy clic sobre alguna pestaña se me desaparecen las demás:

Código Javascript:

$(document).on('touchstart click', '.acc-btn', function(){
if( $( document ).height() == 50 ){
    jQuery('.acc-btn').show();
    
    } else if( $( document ).height() >= 100 ){
    jQuery('.acc-btn').hide();  
 
    }
 

El ejercicio fue tomado de Codepen

Yo lo que necesito es que también tenga la opción de cerrarse.

[ceaped]

No he podido con este tema.
¿Alguien que por favor me ayude?
Gracias

[elmouse19]

Hola. Tu codigo es igual al del codepen que pusiste verdad? Y lo que necesitas es que al hacer el click en el titulo de la pestaña abierta, esa se cierre, al igual que lo hace cuando tocas en otra pestaña?


Lo que vos necesitas es similar a lo que hace el menu lateral izquierdo de este sitio?
EstudiosCOLL

[ceaped]

Hola elmouse19
Si pero eso es con lo que no he podido

[elmouse19]

Bueno, en ese caso, yo hice el sitio que te mostré en el mensaje anterior. Y a la función del menú que te mostré lo hice con un código mucho mas simple.

Te lo muestro.

JS/JQ

Código Javascript:

//Muestra / Oculata menu
    $('.boton').click(function(){
        if ( $(this).next().is( ":hidden" ) ) {
            $('.options').slideUp('normal');
            $(this).next().slideDown('normal');
        } else {
            $(this).next().slideUp('normal');
        };
    });
 

HTML

Código HTML:

<div id="menu">
    <h3 id="fotografia" class="boton">Fotografia</h3>
    <div class="options">
        <ul>
            <li><a href="">Opcion1</a></li>
            <li><a href="">Opcion2</a></li>
        </ul>
    </div>
    <h3 id="servicios" class="boton">Servicios</h3>
    <div class="options">
        <ul>
            <li><a href="">Opcion1</a></li>
            <li><a href="">Opcion2</a></li>
        </ul>
    </div>
    <h3 id="artistas" class="boton">Artistas</h3>
    <div class="options">
        <ul>
            <li><a href="">Opcion1</a></li>
            <li><a href="">Opcion2</a></li>
        </ul>
    </div>
</div> 

CSS

Código CSS:

#menu > .boton{
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 16px;
    margin: 0 0 10px 0;
}
#menu > .boton:hover{
    color: orange;
}
#menu > .options{
    display: none;
}
#menu > .options > ul{
    list-style: none;
    margin: 0 0 15px 0;
    font-size: 14px;
}
#menu > .options > ul > li{
    padding: 3px;
}
 

Este el código en funcionamiento:
JsFidlle

Espero que te sirva.
Sino avísame.

Saludos.

[ceaped]

Hola Hola elmouse19
No logro que me funcione, mira como lo hice:

Código Javascript:

$('.acc-btn').click(function(){
        if ( $(this).next().is( ":hidden" ) ) {
            $('.acc-btn').slideUp('selected');
            $(this).next().slideDown('selected');
        } else {
            $(this).next().slideUp('selected');
        };
    });
 

¿Cómo se ajustaría tu código a mi acordeón ó cómo hago para que mi acordeón funcione?

Gracias por tu ayuda

[elmouse19]

El problema es que estas tratando de cerrar el botón en lugar del contenido.

Código Javascript:

if ( $(this).next().is( ":hidden" ) ) {
            $('.acc-btn').slideUp('selected');
 

Tu botón es .acc-btn. Ese div, o lo que sea, es el que captura el evento, y lo que tienes que cerrar es el contenedor del contenido por debajo del botón. Que según veo en tu codepen seria .acc-content.

Por lo que el codigo deberia quedar mas o menos asi.

Código Javascript:

$('.acc-btn').click(function(){
        if ( $(this).next().is( ":hidden" ) ) {
            $('.acc-content').slideUp('selected');
            $(this).next().slideDown('selected');
        } else {
            $(this).next().slideUp('selected');
        };
    });
 

Así debería funcionar.

PD: tambien tenes que corregir el css. Guiándote de lo que te mostre.

PD2: Hoy mas tarde, tomo tu codepen, y lo modifico lo necesario para que funcione, y luego te lo envio.

[elmouse19]

Bueno.

Modifique todo el codepen que enviaste.

Este seria como queda completo para que funcione.
CODEPEN

Y te dejo el codigo por partes tambien aca.

HTML

Código HTML:

<div class="acc-container">
<div class="acc-btn"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1></div>
<div class="acc-content">
    <p>Proin sodales, nibh eget sollicitudin consectetur, elit nisl malesuada urna, ac fermentum turpis urna id augue. Vestibulum eu consectetur nunc. In ultricies erat nisl, a fringilla risus viverra sed. Phasellus vel sodales elit. Morbi nec adipiscing dolor. Vivamus volutpat vitae velit vel sagittis.</p>
</div>

<div class="acc-btn"><h1>Curabitur et diam vitae dolor accumsan aliquet et in massa.</h1></div>
<div class="acc-content">
    <p>Nulla facilisi. Proin sodales dolor in odio lacinia, ut venenatis massa lobortis. Morbi congue dignissim nisi gravida consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed egestas diam. Nunc ut mauris tempus, rutrum massa vel, pellentesque velit. Nullam eget diam sit amet diam pretium scelerisque. Nunc sed odio nisi. Nunc odio est, rhoncus vitae risus a, sagittis ultrices mauris. Fusce scelerisque posuere pulvinar.</p>
</div>

<div class="acc-btn"><h1>Proin faucibus sem sed dapibus dapibus.</h1></div>
<div class="acc-content">
    <p>Praesent ultricies risus quis magna convallis, ac condimentum tellus laoreet. Donec dictum velit enim, nec hendrerit leo mattis sit amet.</p>
</div>

<div class="acc-btn"><h1>Praesent lobortis urna non est faucibus, vestibulum mattis diam sollicitudin.</h1></div>
<div class="acc-content">
    <p>Fusce eget ultricies ante. In augue urna, rhoncus ac tellus non, porta malesuada magna. Nulla tincidunt orci in metus rhoncus, at malesuada quam varius. Mauris sed tincidunt massa, ut cursus magna. Pellentesque cursus sapien turpis, id blandit magna tempus at.</p>
</div>
</div> 

CSS

Código CSS:

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
 
* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}
 
html, body {
  background:#FFFFFF;
}
 
.acc-container {
  width:90%;
  margin:30px auto 0 auto;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  border-radius:8px;
  overflow: hidden;
}
 
.acc-btn { 
  width:100%;
  margin:0 auto;
  padding:20px 25px;
  cursor:pointer;
  background:#34495E;
  border-bottom:1px solid #2C3E50;
}
 
.acc-content {
  width:100%;
  margin:0 auto;
  display: none;
  background:#2C3E50;
  padding:30px;
  height: auto;
}
 
h1 {
  font:700 20px/26px 'Lato', sans-serif;
  color:#ffffff;
}
 
p { 
  font:400 16px/24px 'Lato', sans-serif;
  color:#798795;
}
 

Js/Jq

Código Javascript:

$('.acc-btn').click(function(){
    if ( $(this).next().is( ":hidden" ) ) {
      $('.acc-content').slideUp('selected');
      $(this).next().slideDown('selected');
    } else {
      $(this).next().slideUp('selected');
    };
});
 

[ceaped]

Hola elmouse19
Muchas gracias por toda tu ayuda...

[elmouse19]

De nada.

Siempre es divertido programar.

Hasta otra.