Разборная панель materializecss с другой структурой html

Question

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

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

Так что, если кто-нибудь может мне помочь с этим, пожалуйста... изменение материализованных компонентов - это как боль в заднице!

 <div class="collapsible">
    <div class="box">
      <div class="1left">Left</div>
      <div class="2center">Center</div>
      <div class="3right">Right
        <a class="collapsible-header">Colapse header</a>
      </div>
    </div>
  </div>
  <div class="collapsible-body">
    This should be the body collapsed
  </div

http://jsfiddle.net/zt5515zt/90/

Answer 1

В Materialize вам нужны как складной заголовок, так и сборно-разборное тело на одном уровне, чтобы заставить складную работу работать.

Просто измените уровень вашего разборного тела, как показано ниже, и он будет работать.

<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
  This should be the body collapsed
</div>

Надеюсь, это поможет вам решить проблему.