Materialize CSS
  Prev Page
Next Page  
Materialize Collapsibles
Material Design Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user. Materialize CSS provides different types of CSS collapsible classes, there are accordion, popout, active, expandable and more..
Initialization jQuery Plugin

Collapsible elements only need initialization if they are added dynamically.

$(document).ready(function(){
    $('.collapsible').collapsible();
  });
<div class="container">
    
  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">code</i>HTML5</div>
      <div class="collapsible-body"><span>HTML5 (No space between "HTML" and "5")is a markup language.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
      <div class="collapsible-body"><span>The first working draft of CSS3 came in 19-01-2001. </span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">favorite_border</i>Material Design</div>
      <div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
      <div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
    </li>
  </ul>
    
</div>

<script type="text/javascript">
 $(document).ready(function(){
    $('.collapsible').collapsible();
  });
</script>
Output :
Preselected Section ( active)

If you want a collapsible Preselected section, just add the active class to the collapsible-header.

<div class="collapsible-header active"><i class="material-icons">code</i>HTML5</div>
<div class="container">
    
  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active"><i class="material-icons">code</i>HTML5</div>
      <div class="collapsible-body"><span>HTML5 (No space between "HTML" and "5")is a markup language.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
      <div class="collapsible-body"><span>The first working draft of CSS3 came in 19-01-2001. </span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">favorite_border</i>Material Design</div>
      <div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
      <div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
    </li>
  </ul>
    
</div>

<script type="text/javascript">
 $(document).ready(function(){
    $('.collapsible').collapsible();
  });
</script>
Output :
Collapsibles Popout

To create a collapsible popout, just add the popout class in <ul>. Ex : class="collapsible popout".

<div class="container">
    
  <ul class="collapsible popout" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">code</i>HTML5</div>
      <div class="collapsible-body"><span>HTML5 (No space between "HTML" and "5")is a markup language.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
      <div class="collapsible-body"><span>The first working draft of CSS3 came in 19-01-2001. </span></div>
    </li>
    <li>
      <div class="collapsible-header active"><i class="material-icons">favorite_border</i>Material Design</div>
      <div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
      <div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
    </li>
  </ul>
    
</div>

<script type="text/javascript">
 $(document).ready(function(){
    $('.collapsible').collapsible();
  });
</script>
Output :
Expandable

Are you create collapsible expandables just add expandable class in <ul>. 

<ul class="collapsible" data-collapsible="expandable">
<div class="container">
    
  <ul class="collapsible" data-collapsible="expandable">
    <li>
      <div class="collapsible-header"><i class="material-icons">code</i>HTML5</div>
      <div class="collapsible-body"><span>HTML5 (No space between "HTML" and "5")is a markup language.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
      <div class="collapsible-body"><span>The first working draft of CSS3 came in 19-01-2001. </span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">favorite_border</i>Material Design</div>
      <div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
      <div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
    </li>
  </ul>
    
</div>

<script type="text/javascript">
 $(document).ready(function(){
    $('.collapsible').collapsible();
  });
</script>
Output :
Collapsible Options

You can customize the behavior of each collapsible using these options.

$('.collapsible').collapsible({
    accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
    onOpen: function(el) { alert('Open'); }, // Callback for Collapsible open
    onClose: function(el) { alert('Closed'); } // Callback for Collapsible close
  });
Collapsible Methods

You can programmatically open and close collapsibles through these methods.

// Open
$('.collapsible').collapsible('open', 0);

// Close
$('.collapsible').collapsible('close', 0);

// Destroy
$('.collapsible').collapsible('destroy');
  Prev Page
Next Page