Stophface Stophface - 2 months ago 10
CSS Question

Align content of div vertically in line, under button

I have this set up JSFiddle
I need the

Points
that appear after clicking
Button 2
(
Point 3
,
Point 4
) under
Button 2
, and not under
Button 1
.

How do I accomplish that?



var myButton = document.getElementById("myButton");
var dropdDown = document.getElementById("dropdown");

(function() {

"use strict";

dropdownExpander(myButton, dropdDown);

function dropdownExpander(bdropdown, dContent) {
bdropdown.addEventListener("click", function(e) {
e.preventDefault();
if (dContent.classList.contains("is-active") === true) {
dContent.classList.remove("is-active");

} else {
dContent.classList.add("is-active");
}
});
}

})();


var myButton = document.getElementById("myButton2");
var dropdDown = document.getElementById("dropdown2");

(function() {

"use strict";

dropdownExpander(myButton, dropdDown);

function dropdownExpander(bdropdown, dContent) {
bdropdown.addEventListener("click", function(e) {
e.preventDefault();
if (dContent.classList.contains("is-active") === true) {
dContent.classList.remove("is-active");

} else {
dContent.classList.add("is-active");
}
});
}

})();

.parentDiv {
display: inline-blick;
}
#myButton {
padding: 5px;
}
.childDiv {
display: none;
position: absolute;
padding-right: 5px;
}
.childDiv.is-active {
display: block;
}

<div class="parentDiv">
<button type="button" id="myButton">Button 1</button>
<div class="childDiv" , id="dropdown">
<div class="cont">Point 1</div>
<div class="cont">Point 2</div>
</div>

<button type="button" id="myButton2">Button 2</button>
<div class="childDiv" , id="dropdown2">
<div class="cont">Point 3</div>
<div class="cont">Point 4</div>
</div>
</div>




Answer

wrap each Button+Dropdown in your .parentDiv.
corrected the inline-blick.
added position: relative;

HTML:

<div class="parentDiv">
  <button type="button" id="myButton">Button 1</button>
  <div class="childDiv" , id="dropdown">
    <div class="cont"> Point 1</div>
    <div class="cont"> Point 2</div>
  </div>
</div>
<div class="parentDiv">
  <button type="button" id="myButton2">Button 2</button>
  <div class="childDiv" , id="dropdown2">
    <div class="cont"> Point 3</div>
    <div class="cont"> Point 4</div>
  </div>
</div>

CSS:

.parentDiv {
  display: inline-block;
  position: relative;
}

JSFiddle