尝试使用 css & html 创建水平手风琴

Question

第一次在这里发帖，但总能在这里找到有用的信息！

我正在构建一个需要水平手风琴部分的站点。我修改了 sitepoint 中使用 :target selection.

的示例

我想要的是 3 个相等的列的初始布局，每列中有一小块初始内容。单击链接时，初始内容将被隐藏，目标部分将扩展到 90%，而其他两个部分将减少到 5%。（我将在 header 部分添加 90 度变换并隐藏其他内容）。

目前目标部分扩展到 90%，但其他两个部分保持在 33% 并在下方环绕。是否可以使用此方法修改 'un-targeted' 部分？

HTML

<article class="how-accordion" id="how">

  <section id="acc1">

    <h2><a href="#acc1">Shows hidden content</a></h2>
    <p class="initial pt-5">Content to be hidden on click</p>
    <p>This content appears on page 1.</p>
    <a class="closedown" href="#how">Close</a>

  </section>

  <section id="acc2">

    <h2><a href="#acc2">Show 2nd hidden section</a></h2>
    <p class="initial pt-5">Content to be hidden on click</p>
    <p>This content appears on page 2.</p>
    <a class="closedown" href="#how">Close</a>

  </section>

  <section id="acc3">

    <h2><a href="#acc3">Show 3rd hidden section</a></h2>
    <p class="initial pt-5">Content to be hidden on click</p>
    <p>This content appears on page 3.</p>
    <a class="closedown" href="#how">Close</a>

  </section>

</article>

CSS

article.how-accordion {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: yellow;
  overflow: auto;
  text-indent: 1em;
}

article.how-accordion section {
  position: relative;
  display: block;
  float: left;
  width: 33%;
  height: 12em;
  color: transparent;
  background-color: transparent;
  overflow: hidden;
  border-radius: 3px;
}

article.how-accordion section h2 {
  /*    position: absolute;*/
  font-size: 1em;
  font-weight: bold;
  width: 12em;
  height: 2em;
  /*    top: 12em;*/
  left: 0;
  text-indent: 1em;
  padding: 0;
  margin: 0;
  color: #ddd;
}

article.how-accordion section h2 a {
  display: block;
  width: 100%;
  line-height: 2em;
  text-decoration: none;
  color: blue;
  outline: 0 none;
}

.initial {
  color: black;
}

article.how-accordion section:target .initial {
  display: none;
}

.closedown {
  color: transparent;
}

article.how-accordion section:target .closedown {
  color: green;
}

article.how-accordion section:target {
  width: 90%;
  padding: 0 1em;
  color: #333030;
  background-color: red;
}

article.how-accordion section:target h2 {
  position: static;
  font-size: 1.3em;
  text-indent: 0;
  color: transparent;
}

article.how-accordion section,
article.how-accordion section h2 {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

任何帮助或相关文章（我正在努力学习和解决问题）将不胜感激。

谢谢

Answer 1

如果你真的想避免 javascript，你可以使用 flexbox 做一些事情，但正如评论所暗示的那样，这不是很实用。已更新 css：

article.how-accordion {
  display: flex;
  width: 100%;
  margin: 0 auto;
  background: yellow;
  overflow: auto;
  text-indent: 1em;
}

article.how-accordion section {
  position: relative;
  display: block;
  float: left;
  height: 12em;
  color: transparent;
  background-color: transparent;
  overflow: hidden;
  border-radius: 3px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 5%;
}

article.how-accordion section h2 {
  /*    position: absolute;*/
  font-size: 1em;
  font-weight: bold;
  width: 12em;
  height: 2em;
  /*    top: 12em;*/
  left: 0;
  text-indent: 1em;
  padding: 0;
  margin: 0;
  color: #ddd;
}

article.how-accordion section h2 a {
  display: block;
  width: 100%;
  line-height: 2em;
  text-decoration: none;
  color: blue;
  outline: 0 none;
}

.initial {
  color: black;
}

article.how-accordion section:target .initial {
  display: none;
}

.closedown {
  color: transparent;
}

article.how-accordion section:target .closedown {
  color: green;
}

article.how-accordion section:target {
  /* width: 90%; */
  padding: 0 1em;
  color: #333030;
  background-color: red;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 90%;
}

article.how-accordion section:target h2 {
  position: static;
  font-size: 1.3em;
  text-indent: 0;
  color: transparent;
}

article.how-accordion section,
article.how-accordion section h2 {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

Fiddle: https://jsfiddle.net/qpn614eo/27/

Answer 2

对于未来的访问者，这里是 best I've found. Taken from here。

每个示例都有一个关联的 jsfiddle。

尝试使用 css & html 创建水平手风琴

Trying to create a horizontal accordion using css & html

html

css

accordion

horizontal-accordion