All css accordion divs open by default (no jquery)

问题:

I'm using this:

jsfiddle.net/wromLbq5

And am hoping to have the ability to have multiple accordion sections open at once, and on page load. By this I mean, when one opens, I don't want the other to close. Is this possible? Without javascript as well.

(Ignore all the sub accordions too- I only need 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'm trying to avoid any java script. Is this possible?

回答1:

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

You cannot set state with css but you can style it. If you would like to keep each section open after clicking you would have to use javascript, but you don't need jQuery

If you would like to use javascript, this mimics the css as closely as possible while allowing the accordions to stay 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 then either drop it in 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 cease to have effect, you should leave them in the css as a fallback in case the user has javascript disabled.

回答2:

This css is showing all of the accordions as closed using this style:

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

You could set it to 33px to show all open when the page opens - but that would break the functionality as it is the :target selector which then sets the height and thus causes the selected section to show as open.

The only solution is to move into javascript.....

回答3:

Can it be done? Yes

Do you need to change your HTML? Yes

Is it pretty? No

Basically instead of Target maintaining state. Use a checkbox replacing you 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!