Все дивы CSS гармошка открытые по умолчанию (не JQuery)

Question

Я использую это:

jsfiddle.net/wromLbq5

И я надеюсь иметь возможность иметь несколько секций аккордеона открытые одновременно, и на странице загрузки. Под этим я подразумеваю, что когда кто-то открывается, я не хочу, чтобы другой закрывался. Это возможно? Без javascript.

(Игнорировать все вложенные аккордеоны слишком- мне нужно только один слой)

HTML

<ul class="accordion"> 

    <li id="one" class="files"> 
    <a href="#one">My Files<span>495</span></a> 
    <ul class="sub-menu"> 
     <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> 
     <li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li> 
     <li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li> 
     <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> 
     <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> 
    </ul> 
    </li> 

    <li id="two" class="mail"> 
    <a href="#two">Mail<span>26</span></a> 
    <ul class="sub-menu"> 
     <li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li> 
     <li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li> 
     <li><a href="#two"><em>03</em>Gmail<span>3</span></a></li> 
    </ul> 
    </li> 

    <li id="three" class="cloud"> 
    <a href="#three">Cloud<span>58</span></a> 
    <ul class="sub-menu"> 
     <li><a href="#three"><em>01</em>Connect<span>12</span></a></li> 
     <li><a href="#three"><em>02</em>Profiles<span>19</span></a></li> 
     <li><a href="#three"><em>03</em>Options<span>27</span></a></li> 
    </ul> 
    </li> 

    <li id="four" class="sign"> 
    <a href="#four">Sign Out</a> 
    <ul class="sub-menu"> 
     <li><a href="#four"><em>01</em>Log Out</a></li> 
     <li><a href="#four"><em>02</em>Delete Account</a></li> 
     <li><a href="#four"><em>03</em>Freeze Account</a></li> 
    </ul> 
    </li> 

</ul> 

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://designmodo.com/demo/css3accordionmenu/img/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; 
} 

Я пытаюсь избежать любого Java Script. Возможно ли это?

Answer 1

Нет, это невозможно с использованием только css, потому что в вашем примере используется селектор CSS3 :target. Когда вы нажимаете на другой предмет, цель изменяется.

Вы не можете установить состояние с помощью css, но можете его стилизовать. Если вы хотите, чтобы каждый раздел открывался после нажатия, вам нужно будет использовать javascript, но вам не нужно jQuery

Если вы хотите использовать javascript, это подражает css как можно ближе, позволяя аккордеонам оставайся открытым. Чтобы закрыть аккордеон, просто нажмите на заголовок еще раз.

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 
     } 
    } 
    }; 
} 

Wrap это в теге сценария, то либо поместите его в в нижней части тела, или обернуть его в document.onload = function() { /* Script Here */ }

(Demo)

Примечание в то время как в любом стиле с :target селектор перестанет иметь эффект, вы должны оставить их в css как резерв в случае, если у пользователя отключен javascript.

Answer 2

Этот CSS показывает все аккордеона как закрытые с использованием этого стиля:

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

Вы можете установить его на 33px, чтобы показать все открытые при открытии страницы - но это нарушило бы функциональность, как это : целевой селектор, который затем устанавливает высоту и, следовательно, вызывает выделенную секцию как открытую.

Единственное решение перейти в JavaScript .....

Answer 3

Можно ли это сделать? Да

Нужно изменить HTML? Да

Это довольно? No

В основном вместо Target с сохранением состояния. Используйте checkbox, заменяя ваш верхний уровень a тегами с label.

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://designmodo.com/demo/css3accordionmenu/img/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; 
 
}

<ul class="accordion"> 
 
     
 
    <li id="one" class="files"> 
 
     <input type="checkBox" id="cbOne" checked="checked" /><label for="cbOne" >My Files<span>495</span></label> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> 
 
     <li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li> 
 
     <li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li> 
 
     <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> 
 
     <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> 
 
    </ul> 
 
    </li> 
 
    
 
    <li id="two" class="mail"> 
 
     <input type="checkBox" id="cbTwo" checked="checked" /><label for="cbTwo" >Mail<span>26</span></label> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li> 
 
     <li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li> 
 
     <li><a href="#two"><em>03</em>Gmail<span>3</span></a></li> 
 
    </ul> 
 
    </li> 
 
    
 
    <li id="three" class="cloud"> 
 
     <input type="checkBox" id="cbThree" checked="checked" /><label for="cbThree" >Cloud<span>58</span></label> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#three"><em>01</em>Connect<span>12</span></a></li> 
 
     <li><a href="#three"><em>02</em>Profiles<span>19</span></a></li> 
 
     <li><a href="#three"><em>03</em>Options<span>27</span></a></li> 
 
    </ul> 
 
    </li> 
 
    
 
    <li id="four" class="sign"> 
 
     <input type="checkBox" id="cbFour" checked="checked" /><label for="cbFour" >Sign Out</label> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#four"><em>01</em>Log Out</a></li> 
 
     <li><a href="#four"><em>02</em>Delete Account</a></li> 
 
     <li><a href="#four"><em>03</em>Freeze Account</a></li> 
 
    </ul> 
 
    </li> 
 

 
</ul>

Look Ma! Нет Javascript!