0

Есть меню-аккордеон на bootstrap. Хочу сделать так, чтобы при нажатии на раскрытие списка - содержимое выводилось в правой области, а не под пунктом меню списка. Как это сделать так, чтобы сохранить адаптивность при этом (на малых разрешениях уже список раскрывается под списком)? Фидл

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 ответа 2

1

Естественно, ограничить width у button.accordion (например, 50%). Добавить panel float: right; и оставшиеся width: 50%;.

Получится нечто подобное, дальше уже можно кастомизировать: форк с JSFiddle.

5
  • Musharapov спасибо, но ведь в таком случае - контент будет раскрываться на уровне открывающегося пункта со смещением вниз. А смысл в том, чтобы он раскрывался каждый раз в одном месте с самого верха и не сдвигал контент снизу
    – Вася
    31 янв 2017 в 14:39
  • Тогда проверять, есть ли уже у какого-то из элементов accordion класс active и убирать его - перед this.classList.toggle("active");. Это пока первое, что пришло в голову под вечер. 31 янв 2017 в 15:00
  • Musharapov так чтоль? ` if(this.hasClass("active")) { this.removeClass("active"); }` jsfiddle.net/6wqm2wvu/7
    – Вася
    1 фев 2017 в 12:40
  • 1
    Вот: jsfiddle.net/8shLx49b - правда, лагает. И отступ сверху, равный размеру h2, в fiddle не будет виден, потому что там свой h2, а код - лишь frame. 2 фев 2017 в 8:23
  • 1
    Musharapov я решил по другому без гемора
    – Вася
    6 фев 2017 в 9:50
0

Как оказалось, для этого используется не аккордеон, а вкладки bootstrap Фидл

<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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.