Как создать аккордеон с jQuery в WordPress?

Я пытаюсь создать аккордеон, который немного отличается от большинства.

То, что я пытаюсь сделать:

У вас есть заголовок, который при нажатии на описание отображается по ширине страницы.
Я хотел бы, чтобы заголовки разбивались по экрану на три столбца; поэтому название не будет охватывать ширину страницы

В основном ищет что-то вроде этого:

Как вы можете видеть, это немного отличается от большинства случаев. Я нашел живую демонстрацию чего-то похожего на то, что я пытаюсь сделать, это можно найти здесь.

Что я сделал до сих пор:

Я использую Cherry Framework и использую короткие коды, чтобы попытаться заставить это работать, но у меня возникают проблемы, когда я пытаюсь расширить описание из названия. Не уверен, есть ли способ отредактировать аккордеонный код, чтобы описание отображалось по всей ширине или нет, но я думаю, что это было бы идеально.

Вот мой код:

    [tabs direction="top" tab1="the first tab" tab2="the second tab" tab3="the third tab"]
[tab1]

[row]

[span4]

[accordion title="Title 1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]

[/span4]

[span4]

[accordion title="Title 2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[/row]

[row]

[span4]

[accordion title="Title 4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 6"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]
[/row]

Вот скриншоты для того, что у меня есть:

Как я уже сказал, я использую короткие коды, чтобы сделать это прямо сейчас. Я уверен, что есть более простой способ сделать это, когда я бы не столкнулся с проблемами, когда текст описания не пересекает ширину страницы.

Ответ 1

Ниже приведен пример, пожалуйста, проверьте код.

$(document).ready(function(){
    $('.main ul li').click(function(){
      $('.main ul li').removeClass('active');
      $(this).addClass('active');
      $('.main ul li').css('margin-bottom','1%');
      $('.innerBox').hide();
      var boxHeight=$(this).children('.innerBox').innerHeight();
      $(this).css('margin-bottom', boxHeight);
      $(this).children('.innerBox').slideDown();
      var widthUL = $('.main ul').width() - 10;
      var test = $(this);
      var leftUL = test.position().left;
      $('.innerBox').css({'width': widthUL,'margin-left':- leftUL});      
    });
  });

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
.clrfix:after{
  content:'';
  clear:both;
  display:block;
}
.main{
  width:900px;
  margin:0 auto;
  border:1px solid #ccc;
  position: relative;
  overflow:hidden;
}
.main ul li{
  padding:.5%;
  width:31%;
  border:1px solid #ccc;
  list-style:none;
  margin:1%;
  display:inline-flex;
  position: relative;
  border-radius:5px;
}
.main ul li.active{
  background:#d7e3de;
  border:1px solid #333;
  border-bottom:none;
  padding:1%;
  border-radius:0;
}
.main ul li.active .innerBox{
  top:37px;
}
.main ul li .innerBox{
  background:#d7e3de;
  position:absolute;
  left:-1px;
  display:none;
  top:38px;
  z-index:1;
  border:1px solid #333;
  padding:10px;
  min-height:20px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="main">
    <ul class="clrfix">
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat caborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>

    </ul>
  </div>

Ответ 2

что, если вы сделаете описание тем же, что и заголовок, так что он появится не на 100%, а на той же ширине, что и заголовок. Я не знаю, как работает WordPress, но в простых html и css это может сработать.

Если это не сработает, попробуйте сделать их столбцами в css

например, это сделает 2 столбца с синей сплошной линией 1px между ними.

  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count:2 ; /* Firefox */
  -webkit-column-width: 50%; /* Chrome, Safari, Opera */
  -moz-column-width: 50%; /* Firefox */
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 1px; /* Firefox */
  -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
  -moz-column-rule-color: blue; /* Firefox */

это не действительно css, но он будет работать в Firefox, Chrome, Safari и Opera IE не будет работать, но я нашел this, который делает насколько я знаю.