Align content of div vertically in line, under button

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>

why not use `tables`? Make one `tr` and two `td`s, each having the `button` as well as the `div`s — Jay Ghosh, Sep 28 '16 at 13:23
@JayGhosh I tried but I had no luck. I made `parentDiv` as a table, but that did not help — four-eyes, Sep 28 '16 at 13:23
with flexbox you can achieve `
Point
Point4
` and css `.className {display : flex; flex-direction:column; justify content flex-end;` — Aatif Bandey, Sep 28 '16 at 13:24

score 1 · Answer 1 · answered Sep 28 '16 at 13:24

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>

score 0 · Accepted Answer · answered Sep 28 '16 at 13:25

0

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

answered Sep 28 '16 at 13:25

AlexG

5,649
6
26
43

Thanks. I dont understand why I need to wrap both into the `.parendDiv`? – four-eyes Sep 28 '16 at 13:32
`position: absolute;` requires an element to align to. Which would be your `body` in the original post. Setting the `.parentDiv` to relative aligns it to the parent. But they both require a seperate parent that can be relative. – AlexG Sep 28 '16 at 13:36

score 0 · Answer 3 · answered Sep 28 '16 at 13:28

0

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>

answered Sep 28 '16 at 13:28

Jay Ghosh

674
6
24

Please. Don't use tables for something else than tables. Just don't. – AlexG Sep 28 '16 at 13:31
May I know why? – Jay Ghosh Sep 28 '16 at 13:32
[Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – AlexG Sep 28 '16 at 13:38
2

Ya I have researched on it as bit and found out why. Thank though – Jay Ghosh Sep 28 '16 at 13:39

score 0 · Answer 4 · answered Sep 28 '16 at 14:09

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');
  }

})();

Align content of div vertically in line, under button

4 Answers4