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:
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
:
Ver originaljQuery('.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
:
Ver original$($('.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!
