Dejar abierto acordeón según ancho

[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