在按钮下方垂直对齐div的内容

Question

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 1

Use this code

<div class = "parentDiv"> 
<div style='float:left'>

<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 style='float:left'>
      <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>
</div>

Answer 2

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

Answer 3

Here's a solution that uses flexbox for layout:

codepen: http://codepen.io/anon/pen/LRLQoV

<div class="flex-container">
  <div class='flex-column'>
    <button type="button" id="button1">Button 1</button>
    <div class="childDiv hidden" , id="dropdown1">
      <div class="cont"> Point 1</div>
      <div class="cont"> Point 2</div>
    </div>
  </div>

  <div class='flex-column'>
    <button type="button" id="button2">Button 2</button>
    <div class="childDiv" id="dropdown2">
      <div class="cont"> Point 3</div>
      <div class="cont"> Point 4</div>
    </div>
  </div>
  <button id='reset'>Reset</button>
</div>

css:

.flex-container {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hidden {
  display: none;
}

#reset {
 margin-left: auto;
  color: white;
  background: red;
}

javascript:

(() => {
  const button1 = document.getElementById('button1');
  const button2 = document.getElementById('button2');
  const element1 = document.getElementById('dropdown1');
  const element2 = document.getElementById('dropdown2');
  const resetButton = document.getElementById('reset');

  button1.onclick = () => {
    element1.classList.remove('hidden');
  }

  button2.onclick = () => {
    element2.classList.remove('hidden');
  }

  resetButton.onclick = () => {
    element1.classList.add('hidden');
    element2.classList.add('hidden');
  }

})();

Answer 4

Use HTML <table>

<table>
<tr>
    <td>
          <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>
   </td>
   <td>
          <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>
  </td>
</tr>
</table>