Todas las divisiones de acordeón de css están abiertas de forma predeterminada (sin jQuery)

Estoy usando esto:

jsfiddle.net/wromLbq5

Y espero tener la capacidad de tener abiertas varias secciones de acordeón a la vez y en la carga de la página. Con esto quiero decir, cuando se abre uno, no quiero que se cierre el otro. es posible? Sin javascript también.

(Ignore todos los subacordeones también, solo necesito una capa)

HTML

 

CSS

 body {margin:50px;} /* Reset */ .accordion, .accordion ul, .accordion li, .accordion a, .accordion span { margin: 0; padding: 0; border: none; outline: none; } .accordion li { list-style: none; } /* Layout & Style */ .accordion li > a { display: block; position: relative; min-width: 110px; padding: 0 10px 0 40px; height: 32px; color: #fdfdfd; font: bold 12px/32px Arial, sans-serif; text-decoration: none; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #6c6e74; background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)); background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } .accordion > li:hover > a, .accordion > li:target > a { color: #3e5706; text-shadow: 1px 1px 1px rgba(255,255,255, .2); /*background: url(../img/active.png) repeat-x;*/ background: #a5cd4e; background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); } .accordion li > a span { display: block; position: absolute; top: 7px; right: 0; padding: 0 10px; margin-right: 10px; font: normal bold 12px/18px Arial, sans-serif; background: #404247; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); } .accordion > li:hover > a span, .accordion > li:target > a span { color: #fdfdfd; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #3e5706; } /* Images */ .accordion > li > a:before { position: absolute; top: 0; left: 0; content: ''; width: 24px; height: 24px; margin: 4px 8px; background-repeat: no-repeat; background-image: url(http://www.miximages.com/html/icons.png); background-position: 0px 0px; } .accordion li.files > a:before { background-position: 0px 0px; } .accordion li.files:hover > a:before, .accordion li.files:target > a:before { background-position: 0px -24px; } .accordion li.mail > a:before { background-position: -24px 0px; } .accordion li.mail:hover > a:before, .accordion li.mail:target > a:before { background-position: -24px -24px; } .accordion li.cloud > a:before { background-position: -48px 0px; } .accordion li.cloud:hover > a:before, .accordion li.cloud:target > a:before { background-position: -48px -24px; } .accordion li.sign > a:before { background-position: -72px 0px; } .accordion li.sign:hover > a:before, .accordion li.sign:target > a:before { background-position: -72px -24px; } /* Sub Menu */ .sub-menu li a { color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #e5e5e5; border-bottom: 1px solid #c9c9c9; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } .sub-menu li:hover a { background: #efefef; } .sub-menu li:last-child a { border: none; } .sub-menu li > a span { color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: transparent; border: 1px solid #c9c9c9; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sub-menu em { position: absolute; top: 0; left: 0; margin-left: 14px; color: #a6a6a6; font: normal 10px/32px Arial, sans-serif; } /* Functionality */ .accordion li > .sub-menu li { height: 0; overflow: hidden; -webkit-transition: height .2s ease-in-out; -moz-transition: height .2s ease-in-out; -o-transition: height .2s ease-in-out; -ms-transition: height .2s ease-in-out; transition: height .2s ease-in-out; } .accordion li:target > .sub-menu li { height: 33px; } 

Estoy tratando de evitar cualquier script de Java. es posible?

No, esto no es posible solo con css, porque su ejemplo utiliza el selector de :target CSS3 :target . Cuando haces clic en otro elemento, el objective cambia.

No puede establecer el estado con css pero puede diseñarlo. Si desea mantener cada sección abierta después de hacer clic, tendrá que usar javascript, pero no necesita jQuery

Si desea utilizar javascript, esto imita el css lo más cerca posible y permite que los acordeones permanezcan abiertos. Para cerrar el acordeón simplemente haga clic nuevamente en el título.

 var lists = document.querySelectorAll('.accordion > li > a'); // get list title links for (var i = 0; i < lists.length; i++) { // for each list title link lists[i].href = "javascript:void()"; // stop the page from jumping lists[i].onclick = function(e) { // when you click the link var items = e.target.parentNode.querySelectorAll('li'); // get all list items that are siblings of the clicked link for (var x = 0; x < items.length; x++) { // for each list item if (items[x].style.height != '33px') { // if its not open items[x].style.height = '33px'; // open it } else { // otherwise items[x].style.height = '0px'; // close it } } }; } 

Envuélvalo en una etiqueta de secuencia de comandos, luego colóquelo en la parte inferior del cuerpo o envuélvalo en document.onload = function() { /* Script Here */ }

( Demo )

Tenga en cuenta que si bien cualquier estilo con el selector de :target dejará de tener efecto, debe dejarlos en el css como alternativa en caso de que el usuario tenga javascript desactivado.

Este css está mostrando todos los acordeones como cerrados usando este estilo:

  .accordion li > .sub-menu li { height: 0px; } 

Puede configurarlo en 33px para que se muestre todo abierto cuando se abra la página, pero eso rompería la funcionalidad ya que es el selector de destino que luego establece la altura y, por lo tanto, hace que la sección seleccionada se muestre como abierta.

La única solución es pasar a javascript …..

Se puede hacer?

¿Necesitas cambiar tu HTML?

Es bonito? No

Básicamente en lugar de Target mantener el estado. Use una checkbox reemplace las tags de a nivel superior con a etiqueta.

 body {margin:50px;} /* Reset */ .accordion, .accordion ul, .accordion li, .accordion label, .accordion span { margin: 0; padding: 0; border: none; outline: none; } .accordion li { list-style: none; } .accordion input[type="checkbox"]{display:none;} /* Layout & Style */ .accordion li > label, .accordion li > a { display: block; position: relative; min-width: 110px; padding: 0 10px 0 40px; height: 32px; color: #fdfdfd; font: bold 12px/32px Arial, sans-serif; text-decoration: none; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #6c6e74; background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)); background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } .accordion > li:hover > label, .accordion > li:target > label, .accordion > li > input[type="checkbox"]:checked ~ label{ color: #3e5706; text-shadow: 1px 1px 1px rgba(255,255,255, .2); /*background: url(../img/active.png) repeat-x;*/ background: #a5cd4e; background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); } .accordion li > label span, .accordion li > a span { display: block; position: absolute; top: 7px; right: 0; padding: 0 10px; margin-right: 10px; font: normal bold 12px/18px Arial, sans-serif; background: #404247; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); } .accordion > li:hover > label span, .accordion > li:target > label span, .accordion > li > input[type="checkbox"]:checked ~ label span{ color: #fdfdfd; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #3e5706; } /* Images */ .accordion > li > label:before { position: absolute; top: 0; left: 0; content: ''; width: 24px; height: 24px; margin: 4px 8px; background-repeat: no-repeat; background-image: url(http://www.miximages.com/html/icons.png); background-position: 0px 0px; } .accordion li.files > label:before { background-position: 0px 0px; } .accordion li.files:hover > labe:before, .accordion li.files:target > label:before { background-position: 0px -24px; } .accordion li.mail > label:before { background-position: -24px 0px; } .accordion li.mail:hover > label:before, .accordion li.mail:target > label:before { background-position: -24px -24px; } .accordion li.cloud > label:before { background-position: -48px 0px; } .accordion li.cloud:hover > label:before, .accordion input[type="checkbox"]:checked:before { background-position: -48px -24px; } .accordion li.sign > label:before { background-position: -72px 0px; } .accordion li.sign:hover > label:before, .accordion input[type="checkbox"]:checked:before { background-position: -72px -24px; } /* Sub Menu */ .sub-menu li > a { color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #e5e5e5; border-bottom: 1px solid #c9c9c9; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } .sub-menu li:hover a { background: #efefef; } .sub-menu li:last-child a { border: none; } .sub-menu li > a span { color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: transparent; border: 1px solid #c9c9c9; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sub-menu em { position: absolute; top: 0; left: 0; margin-left: 14px; color: #a6a6a6; font: normal 10px/32px Arial, sans-serif; } /* Functionality */ .accordion li > .sub-menu li { height: 0; overflow: hidden; -webkit-transition: height .2s ease-in-out; -moz-transition: height .2s ease-in-out; -o-transition: height .2s ease-in-out; -ms-transition: height .2s ease-in-out; transition: height .2s ease-in-out; } .accordion input[type="checkbox"]:checked ~ .sub-menu li { height: 33px; }