Dejar abierto acordeón según ancho

[ceaped]

Buenas tardes
Tengo este código que me abre y cierra una div (acordeón):

Código Javascript:

$(document).ready(function() {
    $('#acordeon p').each(function() {
        var tis = $(this), state = false, answer = tis.next('div').slideUp();
        tis.click(function() {
            state = !state;
            answer.slideToggle(state);
            tis.toggleClass('active',state);
            
    //Segun el ancho del navegador en menu se cierra o abre
    if( $( document ).width() <= 480 ){
    jQuery('.cajon_boton').show();
    
    } else if( $( document ).width() >= 680 ){
    jQuery('.cajon_boton').hide();  
 
    }
    //Fin Segun el ancho del navegador en menu se cierra o abre
            
        });
    });
});
 

Yo deseo que cuando este grande el navegador permanezca abierta la div.

Esta hace que se me oculte, yo quiero que este abeirta

Código Javascript:

jQuery('.cajon_boton').hide();
 

Gracias por su ayuda

[ceaped]

Hola holaaa
No logro resolver mi problema.

Lo hice así pero la primera div se me cierra:

Código Javascript:

$(document).ready(function() {
    $('#acordeon p').each(function() {
        var tis = $(this), state = false, answer = tis.next('div').slideUp();
 
//Segun el ancho del navegador en menu se cierra o abre
    if( $( document ).width() <= 480 ){
    jQuery('.cajon_boton').show();
    
    } else if( $( document ).width() >= 680 ){
    jQuery('.cajon_boton').show.slideDown();
 
    }
    //Fin Segun el ancho del navegador en menu se cierra o abre
 
        tis.click(function() {
            state = !state;
            answer.slideToggle(state);
            tis.toggleClass('active',state);
            
        });
    });
});
 

Código HTML:

<div class="cajon_boton"><img src="images/imagen_1.jpg" alt="imagen_1"><p>Enlace 1</p></div>
<div class="cajon_boton"><img src="images/imagen_1.jpg" alt="imagen_2"><p>Enlace 2</p></div>
<div class="cajon_boton"><img src="images/imagen_1.jpg" alt="imagen_3"><p>Enlace 3</p></div>
 

Alguien que me pueda ayudar.

Gracias

[jhonjaider1000]

Hola, el problema que tienes es que no sabes como funciona el selector de JQuery.

Mira, no tienes que recorrer todos los Divs como lo estás haciendo, mira es muy simple, cuando haces esto:

Código Javascript:

jQuery('.cajon_boton')
 

Estás seleccionando todos los divs que tengan la clase cajon_boton, así que es simple al detectar el tamaño de la pantalla, o lo que sea, si deseas que sea el primer div quien se muestre, entonces para empezar seleccionas todos los divs y los escondes:

Código Javascript:

jQuery('.cajon_boton').hide()
 

Luego en una linea seguida de la anterior, pones; en donde lo que haces es buscar el primer objeto en ese arreglo de objetos seleccionado previamente con el código jQuery('.cajon_boton'), también lo puedes hacer con $('.cajon_boton') y no escribir jQuery todo el tiempo.

Código Javascript:

$($('.cajon_boton')[0]).show(); //O cualquier efecto, .fadeIn(), slideDown() etc.
 

Por otra parte te dejo un link de un acordeón con solo CSS sin ningún plugin o JQuery en donde solo he anexado un pequeño script de JavaScript nativo para capturar el tamaño de la pantalla, modificar el Dom un poco y hacer lo que quieres, recuerda que siempre hay maneras más fáciles y menos costosas en rendimiento para tus aplicaciones, así que pásate por el link, copia los scripts adecuadamente en un HTML, JS, y CSS por separado o en un solo HTML, y prueba, entendí que querías que el primer div tenia que aparecer abierto si el ancho del tamaño de la pantalla es menor o igual a 480 y de lo contrario tendría que iniciar cerrada al igual que los demás paneles del acordeón.

Enlace del código: https://jsfiddle.net/hd7ujdc9/

Éxitos!