如何在一行中设置手风琴按钮的样式，文本全部打开到同一元素中

Question

我有一堆不同的手风琴，单击它们时，会展开并显示下面的文本。这工作正常，但不是我想要的。我试图让手风琴按钮排成一排，单击时它们会扩展到下面的区域。喜欢：

 _   _   _   _
|_| |_| |_| |_|  (unclicked)
 _   _   _   _
|x|_|_|_|_|_|_|  (clicked)
| text of     |  
| accordion   |
|_____________|

（请原谅 ASCII 艺术。）

现在他们做的更像这样：

 _  
|x|___________   (clicked)
| text of     |  
| accordion   |
|_____________|
|_| |_| |_|      <-- other accordion buttons

我似乎无法弄清楚如何按照我正在寻找的方式进行操作。我一直在用不同的方式来构建手风琴（比如可扩展的桌子），但我不知所措。我在任何地方都找不到这种手风琴风格的例子，这是否可以至少使用我现在拥有的大部分代码来完成？

这是我目前所在位置的 Fiddle：https://jsfiddle.net/zeuyhtpw/3/

::编辑包含代码：

HTML:

<button class="accordion">Button 1</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscingelit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="accordion">Button 2</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="accordion">Button 3</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="accordion">Button 4</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS:

.story {
  display: none;
}

.accordion {
  background-color: black;
  color: white;
  padding: 5px;
}

JS:

var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    story = this.nextElementSibling;

    if (story.style.display === "block") {
      story.style.display = "none";
    } else {
      story.style.display = "block";
    }
  });
}

Answer 1

我稍微调整了你的例子https://jsfiddle.net/7szxorcq/17/

HTML

<button class="accordion">Button 1</button>
<button class="accordion">Button 2</button>
<button class="accordion">Button 3</button>
<button class="accordion">Button 4</button>
<div class="story">
  <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscingelit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
  <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
  <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
  <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Javascript

const acc = document.getElementsByClassName("accordion");
const stories = document.getElementsByClassName("story");

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", () => {

    // Show the story we clicked on
    for (let j = 0; j < stories.length; j++) {
        stories[j].style.display = i === j
        ? 'block'
        : 'none';
    }

  });
}

如何在一行中设置手风琴按钮的样式，文本全部打开到同一元素中

How to style accordion buttons in a row with the text all opening into the same element

javascript

css

accordion