纯 css 水平手风琴：如何在加载时打开面板

Question

我使用此处提到的 target: 方法创建了一个水平手风琴：

http://www.hongkiat.com/blog/create-css-based-content/

虽然手风琴效果很好，但我希望在页面加载时打开手风琴的第一个面板。

有没有简单的方法来做到这一点？

Answer 1

最好只使用Javascript。

在需要打开的版块内添加锚点ID：

<section id="about">
    <h2><a id="tab-active" href="#about">About Us</a></h2>
    <p>Tab content here</p>

添加Javascript自动点击锚点：

document.getElementById('tab-active').click();

这是您提供的完整示例，现在 Javascript:

//JS
document.getElementById('tab-active').click();

/*CSS*/
/*Define Accordion box*/
.accordion { 
     width:830px;
     overflow:hidden; 
     margin:10px auto; 
     color:#474747; 
     background:#414141; 
     padding:10px; 
}

.accordion section{ 
      float:left;
      overflow:hidden; 
      color:#333; 
      cursor:pointer; 
      background: #333; 
      margin:3px; 
}
.accordion section:hover {
      background:#444;
}

.accordion section p { 
      display:none; 
}

.accordion section:after{
      position:relative;
      font-size:24px;
      color:#000;
      font-weight:bold;
}
.accordion section:nth-child(1):after{ content:'1'; }
.accordion section:nth-child(2):after{ content:'2'; }
.accordion section:nth-child(3):after{ content:'3'; }
.accordion section:nth-child(4):after{ content:'4'; }
.accordion section:nth-child(5):after{ content:'5'; }.accordion section:target { 
      background:#FFF; 
      padding:10px;
}
.accordion section:target:hover { 
      background:#FFF; 
}
.accordion section:target h2 {
      width:100%;
}
.accordion section:target h2 a{ 
      color:#333; 
      padding:0;
}
.accordion section:target p {
      display:block;
}
.accordion section h2 a{
      padding:8px 10px;
      display:block; 
      font-size:16px; 
      font-weight:normal;
      color:#eee; 
      text-decoration:none; 
}

.horizontal section{ 
      width:5%; 
      height:250px; 
      -moz-transition: width 0.2s ease-out; 
      -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{
      top:140px;
      left:15px;
}

/*Header of closed slide*/
.horizontal section h2 { 
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
     width:240px; 
     position:relative; 
     left:-100px; 
     top:85px;
} 
/*On mouse over open slide*/
.horizontal :target{ 
     width:73%;
     height:230px; 
}
.horizontal :target h2{ 
     top:0px;
     left:0;
     -webkit-transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg); 
}

<!-- HTML -->
<div class="accordion horizontal">
    <section id="about">
    <h2><a id="tab-active" href="#about">About Us</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elemaentum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>
 
    <section id="services">
    <h2><a href="#services">Services</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>
 
    <section>
        <h2>Blog</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>
 
    <section>
        <h2>Portfolio</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>
 
    <section>
        <h2>Contact</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </section>
</div>

纯 css 水平手风琴：如何在加载时打开面板

pure css horizontal accordion: how to have panel open on load

html

css

accordion

onload