如何修改CSS代码，使一个手风琴面板在开始时打开

Question

好的，我有下面的代码工作得很好。我只需要修改它，这样就有一个默认的面板，当它加载/刷新时打开。

#acc-label {
  display: block;
  float: left;
  height: 330px;
  width: 50px;
  margin-bottom: 10px;
  overflow: hidden;
  -moz-box-shadow:inset 1px 0px 0px 0px #485CBD;
  -webkit-box-shadow:inset 1px 0px 0px 0px #485CBD;
  box-shadow:inset 1px 0px 0px 0px #485CBD;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320BB8', endColorstr='#320078');
  background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320BB8), color-stop(1, #320078) );
  background:-moz-linear-gradient( right center, #320BB8 5%, #320078 100% );
  background-color:#320BB8;
  border-style:solid;
  border-color:#321D85;
  color:#FFFFFF;
  font-size:15px;
  font-weight:bold;
  text-decoration:none;
  text-shadow:-1px -1px 0px #3227B0;
  text-align: center;
  font: 14px/50px Helvetica, Verdana, sans-serif; 
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}
#rad2 + label {
  -moz-box-shadow:inset 1px 0px 0px 0px #485CBD;
  -webkit-box-shadow:inset 1px 0px 0px 0px #485CBD;
  box-shadow:inset 1px 0px 0px 0px #485CBD;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320BB8', endColorstr='#320078');
  background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320BB8), color-stop(1, #320078) );
  background:-moz-linear-gradient( right center, #320BB8 5%, #320078 100% );
  background-color:#320BB8;
  border-style:solid;
  border-color:#321D85;
  color:#FFFFFF;
  font-size:15px;
  font-weight:bold;
  text-decoration:none;
  text-shadow:-1px -1px 0px #3227B0;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}
label:hover, #rad2 + label:hover {
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320078', endColorstr='#320BB8');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,         #320078), color-stop(1, #320BB8) );
  background:-moz-linear-gradient( top center, #320078 5%, #320BB8 100% );
  background-color:#9B0629;
  cursor: pointer;
}
/*SLIDES*/
.accslide {
  display: block;
  height: 330px;
  width: 0px;
  padding: 10px 0;
  float: left;
  overflow: hidden;
 color: #333;
  background: #fff;
  font: 12px/1.5 Helvetica, Verdana, sans-serif;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.accslide p, h2, img {
  width: 420px;
  padding-left: 10px;
}
.accslide img {
  margin-top: 10px;
}
input[type="radio"]:checked ~ .accslide {
  width: 450px;
}

手风琴很好用。我只是不知道该添加什么才能使第一个面板在页面加载时默认打开。

Answer 1

嗯，没有任何参考，我几乎是猜测，但是您可以通过以下方式完成:

如果它有一个类，例如first

.accordian-slide:nth-child(1) /* or :first-child */ {
   display: block; /* or whichever you're using */
}
.accordian-slide {
   display: none;
}

或者使用.opened/.closed类添加到幻灯片

.opened { 
   display: block;
}
.closed {
   display: none;
}

否则，如果有一个配置文件，也许你可以设置默认打开的窗格?