Geek Answers Handbook

All css accordion divs are open by default (no jquery)

I use this:

jsfiddle.net/wromLbq5

And I hope that you can simultaneously open several sections of the accordion and to load the page. By this, I mean that when someone opens, I do not want the other to close. Is it possible? Without javascript.

(Ignore all auxiliary harmonics - I need only one layer)

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

I am trying to avoid a java script. Is it possible?

+1
source share
3 answers

No, this is not possible with css only, because your example uses the CSS3 :target selector. When you click on another item, the goal changes.

You cannot set state with css, but you can style it. If you want each section to open after clicking, you will need to use javascript, but you do not need jQuery

If you want to use javascript, it imitates css as close as possible, allowing the accordions to remain open. To close the accordion, simply click on the title again.

 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 this in a script tag, either leave it at the bottom of the body, or wrap it in document.onload = function() { /* Script Here */ }

( Demo )

Note , while any style with the :target selector will no longer have an effect, you should leave them in css as a backup if the user has javascript disabled.

+2
source

This css shows all accordions as closed using this style:

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

You can set it to 33px to show all pages open when you open the page, but this will break the functionality, as it is: the target selector, which then sets the height and thus causes the selected section to appear as open.

The only solution is to switch to javascript .....

+1
source

Can this be done? Yes

Need to change your HTML? Yes

Is that pretty? No

Basically, instead of Target save state. Use checkbox replacing top level a tags with 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! No Javascript!

0
source

More articles:


All Articles