There is a menu-accordion on bootstrap . I want to make it so that when you click on the disclosure of the list - the content is displayed in the right pane, and not under the menu item of the list. How to do it in such a way as to preserve adaptability while doing so (at low resolutions, the list is already revealed under the list)? Feedl

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } 
 button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } button.accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } button.accordion.active:after { content: "\2212"; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Accordion</h2> <div class="row"> <div class="col-sm-6"> <button class="accordion">Section 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="accordion">Section 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="accordion">Section 3</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> <div class="col-sm-6"></div> </div>

    2 answers 2

    Naturally, limit the width of the button.accordion (for example, 50%). Add panel float: right; and remaining width: 50%; .

    Something similar will turn out, further it is already possible to customize: fork with JSFiddle.

    • Thanks Musharapov, but in this case the content will be revealed at the level of the opening item with the shift down. And the point is that it opens every time in one place from the very top and does not shift the content from below - Vasya
    • Then check whether some of the accordion elements already have a class active and remove it β€” before this.classList.toggle("active"); . This is the first thing that came to mind in the evening. - Timur Musharapov
    • Musharapov so chtol? `if (this.hasClass (" active ")) {this.removeClass (" active "); } ` jsfiddle.net/6wqm2wvu/7 - Vasya
    • one
      Here: jsfiddle.net/8shLx49b - true, lag. And the indent from the top, equal to the size of h2, in fiddle will not be visible, because there is your own h2, and the code is just a frame. - Timur Musharapov
    • one
      I decided Musharapov differently without crap - Vasya

    As it turned out, for this purpose, not the accordion is used, but the bootstrap tabs Fiddle

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://bootstrap-ru.com/204/assets/css/bootstrap.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class=""><a href="#lA" data-toggle="tab">Π’ΠΊΠ»Π°Π΄ΠΊΠ° 1</a> </li> <li class=""><a href="#lB" data-toggle="tab">Π’ΠΊΠ»Π°Π΄ΠΊΠ° 2</a> </li> <li class=""><a href="#lC" data-toggle="tab">Π’ΠΊΠ»Π°Π΄ΠΊΠ° 3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade" id="lA"> <p>Π― сСкция A.</p> </div> <div class="tab-pane fade" id="lB"> <p>Π― сСкция B.</p> </div> <div class="tab-pane fade" id="lC"> <p>Как Π΄Π΅Π»Π°? Π­Ρ‚ΠΎ сСкция C.</p> </div> </div> </div>