Html 如何修改CSS代码以在开始时打开一个手风琴面板？

好的，我有下面的代码，非常好用。我只需要修改它，以便在加载/刷新时有一个默认面板打开

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

手风琴演奏得很好。我只是不知道在加载页面时添加什么使第一个面板成为默认打开的面板

---

提前谢谢。

嗯，我猜没有任何参考资料，但您可以通过以下方式完成：

如果它有一个类，例如

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

---

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

你能做一把小提琴吗？我会试试，以前从未做过。一秒钟后，试着把html也包括进来……这似乎比我想象的要复杂。这段代码正在wordpress测试网站上使用，所以我不能简单地复制/粘贴，甚至不能编写一个简化的版本。请注意：如果你不知道有多少个选项卡以及你想先打开哪个选项卡，你必须使用JavaScript来选择第一个可用的元素为“active”。嗯，值得思考。谢谢我会玩它，看看我能打破什么：）我很高兴听到这个！祝你好运