在今天的教程中，我们将学习如何仅使用CSS3即可创建水平和垂直内容手风琴 。 有很多jQuery插件可以为您完成这项工作，但是如果访问者关闭了Javascript，该怎么办，那么手风琴将无法正常工作。 如果您的手风琴完全使用CSS，那么它将对所有访问者都有效。

我们将创建一个水平和垂直内容手风琴。 单击标题文本后，幻灯片将打开，显示完整内容，下面是它们的外观的快速预览（屏幕截图）。

让编码开始！

1.准备HTML和内容

首先，我们将为手风琴创建HTML。

该结构需要一个容器div ，然后为手风琴中的每张幻灯片都有一个section 。 在此示例中，我们将有5张幻灯片。 每张幻灯片都将有一个标题和一段内容。

<div class="accordion horizontal"><section><h2>About Us</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>Services</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>

现在我们有了幻灯片，可以开始为手风琴定型了。

2. CSS样式

首先，我们需要设置包含手风琴的div的样式。 这将使我们了解如何显示每个幻灯片和每个标题。

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

我们将背景颜色设置为该部分的深灰色，以作为访客将单击以显示幻灯片的标题。 我们在标题和内容上都使用了此部分，这意味着我们可以使用更少HTML，并将幻灯片标题重新用作内容的标题。

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

关闭幻灯片后，我们希望在标题底部显示一个数字，以说明我们所在的幻灯片。 为此，我们将使用CSS在节标题之后添加内容，这可以通过使用:after伪类选择器来完成。

现在，我们已经为幻灯片创建了标题，我们可以进行click事件以在手风琴中显示幻灯片。 但是有一个问题，CSS没有click事件，这就是通常使用jQuery创建手风琴的原因，因此我们可以将click事件附加到标题文本。

我们需要模仿CSS中的click事件，可以使用:target伪类选择器来完成。

3.使用

:target允许我们设置片段标识符的样式。 有时，我们使用页面上的定位标记指向页面上的某个位置。 单击链接后，锚标记中的id成为目标，您可以使用:target选择器设置其样式。

要将其添加到手风琴中，我们需要在标题周围添加指向幻灯片id的链接。

<section id="about"><h2><a 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 elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>

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

上面的代码将更改幻灯片的大小以适合手风琴的其余部分，并将背景色更改为白色。 该段落已隐藏，因此现在我们需要显示该段落。

现在，当您单击手风琴的标题时，幻灯片将更改样式以显示幻灯片的内容。

4.水平手风琴

上面的代码将创建一般的手风琴，现在我们可以针对水平和垂直手风琴之间的差异开始更改CSS。 这两个手风琴具有相同的功能，但标题样式不同。

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

首先，我们将标题部分的width设置为5％，以便它是闭合的幻灯片。 由于该部分既是幻灯片的标题又是内容，因此我们需要添加动画以通过使用transition属性显示内容。

/*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);
}

上面的代码将更改幻灯片的大小以适合手风琴的其余部分。 标题已垂直旋转以沿标题向下移动，但是现在打开幻灯片时，我们需要通过将文本旋转回0度来将文本更改回水平。

5.垂直手风琴

垂直手风琴的工作方式与水平手风琴的工作方式相同，只是我们需要更改height而不是width并且我们不需要更改文本的对齐方式。

.vertical section{ width:100%; height:40px; -webkit-transition:height 0.2s ease-out;-moz-transition:height 0.2s ease-out;-o-transition:height 0.2s ease-out;transition:height 0.2s ease-out;
}/*Set height of the slide*/
.vertical :target{ height:250px; width:97%;
}

在垂直手风琴的target事件中，我们将更改标题的height以显示幻灯片。

.vertical section h2 { position:relative; left:0; top:-15px;
}
/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;
}
.vertical section:target:after{ left:-9999px;
}

上面的内容将更改标题文本在关闭的幻灯片上的position 。 在关闭的幻灯片中，我们需要设置位于手风琴右侧的数字的position 。 当幻灯片打开时，我们需要在设置目标后在标题上隐藏此数字，以便我们将左侧位置更改为屏幕之外。

现在，当您单击手风琴的标题时，幻灯片将更改样式以显示幻灯片的内容。

编者注：这篇文章是由Paul Underwood为Hongkiat.com撰写的。 Paul是来自英国布里斯托（Bristol）PHP Web开发人员。 他撰写了有关Web开发的教程：主要主题包括PHP，jQuery，CSS3和HTML5。 他还在Paulund.co.uk上记录了有用的代码段。

翻译自: https://www.hongkiat.com/blog/create-css-based-content/