Material Design Interview Questions
1 .
How Can You Create Collapsibles in Materialize CSS?
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>
  </ul>

</div>
2 .
Explaine materialize modals with example
Use a Material Design Modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger.

Basic Modal :

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal_box">Basic Modal</a>

<!-- Modal Structure -->
<div id="modal_box" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the...</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn">Agree</a>
    </div>
</div>
3 .
What is materialize parallax?
Material Design Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
 
Parallax Structure :
 
<div class="parallax-container">
    <div class="parallax">
    	<img src="../images/parallax_img.jpg" class="responsive-img" alt="Parallax">
    </div>
</div>
 
jQuery Initialization :
 
$(document).ready(function(){
    $('.parallax').parallax();
});
4 .
What is Materialize Pushpin?
Material Design Pushpin means fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges. You can check out the following  example.

Demo Code : 

$('.pushpin-demo-nav').each(function() {
    var $this = $(this);
    var $target = $('#' + $(this).attr('data-target'));
    $this.pushpin({
      top: $target.offset().top,
      bottom: $target.offset().top + $target.outerHeight() - $this.height()
    });
});

// Only necessary for window height sized blocks.
html, body, .block {
   height: 100%;
}
 
jQuery Plugin Initialization :

Here is a sample initialization of materialize pushpin.
 
$(document).ready(function(){
    $('.target').pushpin({
      top: 0,
      bottom: 1000,
      offset: 0
    });
});
5 .
What is Materialize Scrollspy?
Materialize Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. Our main demo of this is our table of contents on every documentation page to the right.
6 .
What is Materialize Waves and how to use it?
Materialize CSS Waves is an external library that we've included to create the ink effect outlined in Material Design.
 
Applying Waves : 

The waves effect can be applied to any element. To put the waves effect on buttons, you just have to put the class waves-effect on to the buttons. If you want the waves effect to be white instead, add both waves-effect waves-light as classes.

<div class="row">
       <tr>
         <td>waves-light</td>
         <td class="center-align">
           <a class="waves-effect blue waves-light btn" href="#!">Click Here !</a>
         </td>
       </tr>
</div>‚Äč