floated horizontal Accordion

Question

How can I solve it, that the div below opens and the 3 tabs always remain in the same position? The div should not open between the tabs, but below. The three tabs should always stand side by side. Is there a possibility for this? Any help will be appreciated. Thank You.

var acc = document.getElementsByClassName("menu-tabs");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

button.menu-tabs {
    background-color: #fff;
    border-color: #EB282C;
    border-bottom: 1px solid #ddd;
    margin-left: 0;
    list-style: none;
    float: left;
    margin-bottom: -1px;
    position: relative;
    display: block;
}

button.menu-tabs.active, button.menu-tabs:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    float: none;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu-tabs">tab 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

<button class="menu-tabs">tab 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

<button class="menu-tabs">tab 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

Answer 1

It would be easier to solve your problem by changing your HTML structure.

Here is a modified version with toggling based on a pair button ID/div class (I also removed some "float code" in the css):

var acc = document.getElementsByClassName("menu-tabs");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
    // toggle this button, make others inactive
    var buttons = document.getElementsByClassName("menu-tabs");
    for (i = 0; i < buttons.length; i++) {
      if (buttons[i] == this) {
        buttons[i].classList.toggle("active");
      }
      else {
        buttons[i].classList.remove("active");
      }
    }
    // toggle panel associated to this, hide the others
    var panels = document.getElementsByClassName("panel");
    for (i = 0; i < panels.length; i++) {
      if (panels[i].classList.contains(this.id)) {
        panels[i].classList.toggle("show");
      }
      else {
        panels[i].classList.remove("show");
      }
    }
  }
}

button.menu-tabs {
  background-color: #fff;
  border-color: #EB282C;
  border-bottom: 1px solid #ddd;
  margin-left: 0;
  list-style: none;
  margin-bottom: -1px;
  position: relative;
  display: inline-block;
}

button.menu-tabs.active, button.menu-tabs:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}

div.panel.show {
  opacity: 1;
  max-height: 500px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class="menu-tabs" id="tab1">tab 1</button>
  <button class="menu-tabs" id="tab2">tab 2</button>
  <button class="menu-tabs" id="tab3">tab 3</button>
</div>

<div class="panel tab1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

<div class="panel tab2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

<div id="foo" class="panel tab3">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>