The Materialize provides various CSS classes to apply various
predefined visual and behavioral enhancements to the display various
types of accordions. The below table mentions the available classes and
their effects.
Following are the examples of using accordions in different ways.
| S.N. | Class Name & Description |
|---|---|
| 1 | collapsible Identifies element as an materialize collapsible component. Required for ul element. |
| 2 | collapsible-header Sets div as section header. |
| 3 | collapsible-body Sets div as section content container. |
| 4 | popout Creates a popout collapsible. |
| 5 | active Opens a section. |
| 6 | expandable Marks a collapsible component as expandable. |
| 7 | accordion Marks a collapsible component as accordion. |
Example
materialize_collapsible.htm<html> <head> <title>The Materialize Collapsible Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h4>Simple Accordion</h4> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> <h4>Popout Accordion</h4> <ul class="collapsible popout" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> <h4>Accordion with Preselected Section</h4> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> <h4>Expandables</h4> <ul class="collapsible" data-collapsible="expandable"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> </body> </html>
No comments:
Post a Comment