Nested Collapsibles with Materialize

Question

I am working on a Meteor project at the minute which uses Materialize. I can implement Collapsible elements fine

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?

I am trying to achieve it with the sample code

<ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body">
              <ul class="collapsible" data-collapsible="accordion">
                <li>
                    <div class="collapsible-header"><i class="material-icons">filter_drama</i>Nested First</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons">place</i>Nested Second</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons">whatshot</i>Nested Third</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
               </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
    </ul>

Answer 1

I had the same problem and was able to nest collapsibles by doing any of the following:

1. Wrap the nested collapsible in a grid row and column that spans the entire width of the containing element, or

2. Wrap the nested collapsible in a div with class = "container", or

3. Wrap the nested collapsible in a container div, a row div, and a col div (a combination of 1 and 2 above), or

4. Wrap the nested collapsible in a div styled with a padding of whatever value you want

Performing #1 above makes the nested collapsible just slightly smaller with a little padding so that it is slightly indented. Doing #2 or #3 makes the nested collapsible considerably smaller and centers it, resulting in a much larger indent. #4 gives you the most control over how you want the nesting to look.

I would think that the 4th way, styling with padding, is the best way to implement this.

I've modified the original HTML to demonstrate these methods:

<ul class="collapsible" data-collapsible="accordion">
	<li>
		<div class="collapsible-header">
			<i class="material-icons">filter_drama</i>First</div>
		<div class="collapsible-body">
			<div class="row">
				<div class="col s12 m12">
					<ul class="collapsible" data-collapsible="accordion">
						<li>
							<div class="collapsible-header">
								<i class="material-icons">filter_drama</i>Nested First</div>
							<div class="collapsible-body">
								<p>Lorem ipsum dolor sit amet.</p>
							</div>
						</li>
						<li>
							<div class="collapsible-header">
								<i class="material-icons">place</i>Nested Second</div>
							<div class="collapsible-body">
								<p>Lorem ipsum dolor sit amet.</p>
							</div>
						</li>
						<li>
							<div class="collapsible-header">
								<i class="material-icons">whatshot</i>Nested Third</div>
							<div class="collapsible-body">
								<p>Lorem ipsum dolor sit amet.</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="collapsible-header">
			<i class="material-icons">place</i>Second</div>
		<div class="collapsible-body">
			<div class="container">
				<ul class="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">
							<i class="material-icons">filter_drama</i>Nested First</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">place</i>Nested Second</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">whatshot</i>Nested Third</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li>
		<div class="collapsible-header">
			<i class="material-icons">whatshot</i>Third</div>
		<div class="collapsible-body">
			<div class="container">
				<div class="row">
					<div class="col s12 m12">
						<ul class="collapsible" data-collapsible="accordion">
							<li>
								<div class="collapsible-header">
									<i class="material-icons">filter_drama</i>Nested First</div>
								<div class="collapsible-body">
									<p>Lorem ipsum dolor sit amet.</p>
								</div>
							</li>
							<li>
								<div class="collapsible-header">
									<i class="material-icons">place</i>Nested Second</div>
								<div class="collapsible-body">
									<p>Lorem ipsum dolor sit amet.</p>
								</div>
							</li>
							<li>
								<div class="collapsible-header">
									<i class="material-icons">whatshot</i>Nested Third</div>
								<div class="collapsible-body">
									<p>Lorem ipsum dolor sit amet.</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="collapsible-header">
			<i class="material-icons">filter_drama</i>Fourth</div>
		<div class="collapsible-body">
			<div style="padding:25px">
				<ul class="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">
							<i class="material-icons">filter_drama</i>Nested First</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">place</i>Nested Second</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">whatshot</i>Nested Third</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

I've also created a codepen of the above that demonstrates nested collapsibles, see link below:

Nested Collapsibles in Materialize

Answer 2

Collapsibles were not styled with nested collapsibles in mind. You can add custom css to help style this by styling only the inner collapsible:

.collapsible .collapsible {
  margin: 0;
}

You can also play around with the padding or borders to help make it clearer that it is another collapsible inside of the outer collapsible.