I'm currently working on a unique accordion design where multiple buttons expand into individual areas below when clicked. The standard accordion layout isn't quite what I'm aiming for. I envision the buttons all in a row, and when clicked, they should expand into separate sections below, creating a design like this:
_ _ _ _
|_| |_| |_| |_| (unclicked)
_ _ _ _
|x|_|_|_|_|_|_| (clicked)
| text of |
| accordion |
|_____________|
(please excuse the ASCII art.)
Currently, the behavior I'm experiencing is more like this:
_
|x|___________ (clicked)
| text of |
| accordion |
|_____________|
|_| |_| |_| <-- other accordion buttons
I'm having trouble figuring out how to achieve the desired layout. I've experimented with various accordion styles, like expandable tables, but haven't been successful. I haven't come across any examples of this specific accordion style either. Is it possible to achieve this using a similar code structure to what I already have?
Here's a Fiddle link to my current progress: https://jsfiddle.net/zeuyhtpw/3/
::edit additional code:
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 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 at 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 at 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 algae 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 pooja 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";
}
});
}