title: Nested Collapsibles with Materialize
body: <p>I am working on a <a href="https://www.meteor.com/" rel="nofollow noreferrer">Meteor</a> project at the minute which uses <a href="http://materializecss.com/" rel="nofollow noreferrer">Materialize</a>. I can implement <a href="http://materializecss.com/collapsible.html" rel="nofollow noreferrer">Collapsible</a> elements fine</p>
  
  <p><a href="https://i.stack.imgur.com/BooCJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BooCJ.png" alt="enter image description here"></a></p>
  
  <p>but when I try and create nested Collapsibles it doesn't look right (notice the spacing above and below, not to mention the lack of an indent which would normally indicate a nested list). Is this a shortcoming of Materialize or is my attempt flawed?</p>
  
  <p><a href="https://i.stack.imgur.com/z0KFx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z0KFx.png" alt="enter image description here"></a></p>
  
  <p>I am trying to achieve it with the sample code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="collapsible" data-collapsible="accordion"&gt;
          &lt;li&gt;
              &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;filter_drama&lt;/i&gt;First&lt;/div&gt;
              &lt;div class="collapsible-body"&gt;
                &lt;ul class="collapsible" data-collapsible="accordion"&gt;
                  &lt;li&gt;
                      &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;filter_drama&lt;/i&gt;Nested First&lt;/div&gt;
                      &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;place&lt;/i&gt;Nested Second&lt;/div&gt;
                      &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;whatshot&lt;/i&gt;Nested Third&lt;/div&gt;
                      &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
                  &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;place&lt;/i&gt;Second&lt;/div&gt;
              &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;whatshot&lt;/i&gt;Third&lt;/div&gt;
              &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>