horizo​​ntal horizo​​ntal Accordion

Question

どうすれば解決できますか？下のdivが開き、3つのタブは常に同じ位置に留まりますか？ divはタブの間で開くのではなく、下から開くべきです。 3つのタブは、常に横に並んでいる必要があります。これには可能性はありますか？どんな助けもありがとう。ありがとうございました。

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

あなたのHTMLの構造を変更することによって、あなたの問題を解決するために容易になるだろう。

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>