# Table of Contents - [Documentation - Materialize](#documentation-materialize) - [About - Materialize](#about-materialize) - [Badges - Materialize](#badges-materialize) - [Getting Started - Materialize](#getting-started-materialize) - [Sass - Materialize](#sass-materialize) - [Parallax - Materialize](#parallax-materialize) - [Collapsible - Materialize](#collapsible-materialize) - [Starter Template - Materialize](#starter-template-materialize) - [Parallax Template - Materialize](#parallax-template-materialize) - [Parallax - Materialize](#parallax-materialize) - [Color - Materialize](#color-materialize) - [Helpers - Materialize](#helpers-materialize) - [Grid - Materialize](#grid-materialize) - [Media CSS - Materialize](#media-css-materialize) - [Pulse - Materialize](#pulse-materialize) - [Table - Materialize](#table-materialize) - [Shadow - Materialize](#shadow-materialize) - [CSS Transitions - Materialize](#css-transitions-materialize) - [Typography - Materialize](#typography-materialize) - [Buttons - Materialize](#buttons-materialize) - [Breadcrumbs - Materialize](#breadcrumbs-materialize) - [Collections - Materialize](#collections-materialize) - [Cards - Materialize](#cards-materialize) - [Footer - Materialize](#footer-materialize) - [Floating Action Button - Materialize](#floating-action-button-materialize) - [Pagination - Materialize](#pagination-materialize) - [Navbar - Materialize](#navbar-materialize) - [Auto Init - Materialize](#auto-init-materialize) - [Preloader - Materialize](#preloader-materialize) - [FeatureDiscovery - Materialize](#featurediscovery-materialize) - [Dropdown - Materialize](#dropdown-materialize) - [Carousel - Materialize](#carousel-materialize) - [Icons - Materialize](#icons-materialize) - [Modals - Materialize](#modals-materialize) - [Scrollspy - Materialize](#scrollspy-materialize) - [Sidenav - Materialize](#sidenav-materialize) - [Toasts - Materialize](#toasts-materialize) - [Tooltips - Materialize](#tooltips-materialize) - [Waves - Materialize](#waves-materialize) - [Tabs - Materialize](#tabs-materialize) - [Checkboxes - Materialize](#checkboxes-materialize) - [Switches - Materialize](#switches-materialize) - [Autocomplete - Materialize](#autocomplete-materialize) - [Chips - Materialize](#chips-materialize) - [Mobile - Materialize](#mobile-materialize) - [Showcase - Materialize](#showcase-materialize) - [Range - Materialize](#range-materialize) - [Radio Buttons - Materialize](#radio-buttons-materialize) - [Pickers - Materialize](#pickers-materialize) - [Media - Materialize](#media-materialize) - [Text Inputs - Materialize](#text-inputs-materialize) - [Select - Materialize](#select-materialize) - [Themes - Materialize](#themes-materialize) - [Support Us - Materialize](#support-us-materialize) - [Pushpin - Materialize](#pushpin-materialize) - [Fullscreen Slider - Materialize](#fullscreen-slider-materialize) - [Pushpin Demo - Materialize](#pushpin-demo-materialize) --- # Documentation - Materialize #### A modern responsive front-end framework based on Material Design [Get Started](http://materializecss.com/getting-started.html) [Upgrade from 0.100.2](https://github.com/Dogfalo/materialize/blob/v1-dev/v1-upgrade-guide.md) [Release: 1.0.0](https://github.com/Dogfalo/materialize) [![ads via Carbon](https://srv.carbonads.net/static/30242/ba5bd7c62e86bafa5d8f86cfb33240b0c584061f)](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVKJYCAYDCZ3JCASD62QNC67IP53KC6SDL23YCYBDK5QYCAAIL5QJCAAI6K3WHEYI52JJF6SIK53ECTNCYBZ52K) [Don’t lose sleep over downtime. Hop on Bunny for reliable sites that stay up.](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVKJYCAYDCZ3JCASD62QNC67IP53KC6SDL23YCYBDK5QYCAAIL5QJCAAI6K3WHEYI52JJF6SIK53ECTNCYBZ52K) [ads via Carbon](http://carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon) Latest Commit on Github:    [](https://materializecss.com/)    [Github](https://github.com/Dogfalo/materialize) _flash\_on_ Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. _group_ User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience. _settings_ Easy to work with We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize. Checkout what people are creating with Materialize. Get inspired by these beautiful sites and you can even submit your own website to be showcased here. [Explore our Showcase](http://materializecss.com/showcase.html) Take a look at our official themes for Materialize. ![](https://s23.postimg.cc/9g7ajckrf/thunder.png) [Explore our Themes](http://materializecss.com/themes.html) --- # About - Materialize #### Learn about Material Design and our Project Team. [![ads via Carbon](https://srv.carbonads.net/static/30242/4f7f59796c5dda8f5dfc63a40583dfde7cebb050)](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVKJYC6YILZ3JCASD62JJCEADL27KCA7IP53NC67DCKQNCASIE2QUC6BDLKJKC6SIKKQ7CASDEK3EHJNCLSIZ) [Design and Development tips in your inbox. Every weekday.](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVKJYC6YILZ3JCASD62JJCEADL27KCA7IP53NC67DCKQNCASIE2QUC6BDLKJKC6SIKKQ7CASDEK3EHJNCLSIZ) [ads via Carbon](http://carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon) Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. ![](http://materializecss.com/images/metaphor.png) #### Material is the metaphor The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world. ![](http://materializecss.com/images/bold.png) #### Bold, graphic, intentional Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus. Emphasis on different actions and components create a visual guide for users. ![](http://materializecss.com/images/motion.png) #### Motion provides meaning Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations. We are a team of students from Carnegie Mellon University. ![](http://materializecss.com/images/materialize_team.jpeg) ![](http://materializecss.com/images/alvin.png) #### Alvin Wang Alvin is an Information Systems and Human Computer Interaction Major. He worked as a Software Engineer at Fidelity Investments this past summer. ![](http://materializecss.com/images/Alan.png) #### Alan Chang Alan is an Information Systems major with a minor in computer science. He worked at as a Front End Developer at Shift Collaborative this past summer. ![](http://materializecss.com/images/alex.png) #### Alex Mark Alex is an Information Systems major with a minor in Human Computer Interaction. He worked as a software developer for Intuit this past summer. ![](http://materializecss.com/images/kevin.png) #### Kevin Louie Kevin is an Information Systems major with a minor in Human Computer Interaction. This past summer, he worked as a technology analyst at PPG Industries. * [Material Design](http://materializecss.com/about.html#materialdesign) * [Meet the Team](http://materializecss.com/about.html#team) --- # Badges - Materialize Badges can notify you that there are new or unread messages or notifications. Add the `new` class to the badge to give it the background. [1Alan](http://materializecss.com/badges.html#!) [4Alan](http://materializecss.com/badges.html#!) [Alan](http://materializecss.com/badges.html#!) [14Alan](http://materializecss.com/badges.html#!)
1Alan 4Alan Alan 14Alan
[Dropdown_arrow\_drop\_down_](http://materializecss.com/badges.html#!) * [one1](http://materializecss.com/badges.html#!) * [two1](http://materializecss.com/badges.html#!) * [three](http://materializecss.com/badges.html#!) Dropdownarrow_drop_down * _filter\_drama_First4 Lorem ipsum dolor sit amet. * _place_Second1 Lorem ipsum dolor sit amet. You can customize captions in many ways. ##### Custom Caption [Custom Badge Captions4](http://materializecss.com/badges.html#!) [Custom Badge Captions4](http://materializecss.com/badges.html#!) You can explicitly set the caption in a badge using the `data-badge-caption` attribute. 4 4 ##### Colors [Red4](http://materializecss.com/badges.html#!) [Blue4](http://materializecss.com/badges.html#!) You can use our color classes to set the background-color of the badge. 4 4 [![ads via Carbon](https://srv.carbonads.net/static/30242/14dd57f2b8ca28bc6e6b0d3c3db360539e38d88a)](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DV2QJCYSI4Z3JCASD62QNCTADP27KC6SD653IFTBD5K7MF6AIVK3YFTBI62JIHEYI52JJF6SIK53ECTNCYBZ52K) [Review requests, book clients, and get paid with Squarespace.](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DV2QJCYSI4Z3JCASD62QNCTADP27KC6SD653IFTBD5K7MF6AIVK3YFTBI62JIHEYI52JJF6SIK53ECTNCYBZ52K) [ads via Carbon](http://carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon) ![ads via Carbon](https://ad.doubleclick.net/ddm/trackimp/N718679.452584BUYSELLADS.COM/B29332811.421611894;dc_trk_aid=613858970;dc_trk_cid=235700574;ord=176197696;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=$;gdpr_consent=$;ltd=;dc_tdv=1?) * [Collections](http://materializecss.com/badges.html#collections) * [Dropdown](http://materializecss.com/badges.html#dropdown) * [Navbar](http://materializecss.com/badges.html#navbar) * [Collapsible](http://materializecss.com/badges.html#collapsible) * [Options](http://materializecss.com/badges.html#options) --- # Getting Started - Materialize #### Learn how to easily start using Materialize in your website. [![ads via Carbon](https://srv.carbonads.net/static/30242/f3dc6d2c4c4ea6771977d883b7a49937b048390f)](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVK7WCYBD5Z3JCASD62QMF67I4K3KFTBDE53LCEYDE2QICW7DTKQNCEAITK7KC6SIKKQ7CASDEK3EHJNCLSIZ) [Get the Drop. Weekly front-end tools, tips, and resources. Plus a free icon pack to get you started.](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVK7WCYBD5Z3JCASD62QMF67I4K3KFTBDE53LCEYDE2QICW7DTKQNCEAITK7KC6SIKKQ7CASDEK3EHJNCLSIZ) [ads via Carbon](http://carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon) Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below. ##### Materialize This is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass. [Materialize_file\_download_](https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-v1.0.0.zip) ##### Sass This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option. [Source_file\_download_](https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-src-v1.0.0.zip) ##### CDN You can find all the versions of the CDN at [cdnjs](https://cdnjs.com/libraries/materialize) . ##### NPM You can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files. npm install materialize-css@next ##### Bower You can also get the latest release using bower. This release contains source files as well as the compiled CSS and JavaScript files. **([bower is deprecated](http://bower.io/blog/2017/how-to-migrate-away-from-bower/) .)** bower install materialize We hope you find Materialize useful in your next project. We would appreciate if you helped us spread the word about Materialize on our Social Media. Also if you want to support the development, you can donate to us. Donate Now ##### Project Structure After downloading, extract the files into the directory where your website is located. Your directory will look something like this. You'll notice that there are two sets of the files. The `min` means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development. MyWebsite/ |--css/ | |--materialize.css | |--fonts/ | |--roboto/ | |--js/ | |--materialize.js | |--index.html ##### HTML Setup Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Materialize into your webpage. We have created some starter templates so you can easily start designing your website with minimal setup up time. Browse through our collection and download your best fit. ##### Starter Template [![](http://materializecss.com/images/starter-template.gif)](http://materializecss.com/templates/starter-template/preview.html) This is the simplest starter page with a Header, Call-to-Action, and Icon Features. [Demo_search_](http://materializecss.com/templates/starter-template/preview.html) [Download_file\_download_](http://materializecss.com/templates/starter-template.zip) ##### Parallax Template [![](http://materializecss.com/images/parallax-template.jpg)](http://materializecss.com/templates/parallax-template/preview.html) This is the simplest starter page with a Header, Call-to-Action, and Icon Features. [Demo_search_](http://materializecss.com/templates/parallax-template/preview.html) [Download_file\_download_](http://materializecss.com/templates/parallax-template.zip) There are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date. ##### Ruby Gem See [here](https://github.com/mkhairi/materialize-sass) for documentation on this gem. gem 'materialize-sass' ##### Meteor Package meteor add materialize:materialize ##### Ember Package # install via npm $ npm install ember-cli-materialize --save-dev # make ember-cli fetch internal dependencies $ ember g ember-cli-materialize This section is only relevant if you chose to download the Sass version of Materialize. ##### Compiling Sass Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page. MyWebsite/ |--css/ | |--materialize.css <-- compiled from scss/materialize.scss | |--js/ | |--materialize.js | |--scss/ | |--materialize.scss | |--components/ | |--index.html * [Download](http://materializecss.com/getting-started.html#download) * [Setup](http://materializecss.com/getting-started.html#setup) * [Templates](http://materializecss.com/getting-started.html#templates) * [Third-party Options](http://materializecss.com/getting-started.html#third-party-options) * [Sass](http://materializecss.com/getting-started.html#sass) --- # Sass - Materialize When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in [\_variables.scss](https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss) . $primary-color: color("materialize-red", "lighten-2") !default; $primary-color-light: false !default; $primary-color-dark: false !default; @if not $primary-color-light { $primary-color-light: lighten($primary-color, 15%); } @if not $primary-color-dark { $primary-color-dark: darken($primary-color, 15%); } $secondary-color: color("teal", "lighten-1") !default; $success-color: color("green", "base") !default; $error-color: color("red", "base") !default; $link-color: color("light-blue", "darken-1") !default; /*** More variables not shown here.. ***/ We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range. Small screens are defined as having a max-width of 600px Medium screens are defined as having a max-width of 992px Large screen are defined as having a min-width of 993px Extra Large screen are defined as having a min-width of 1200px ##### CSS /* These classes can be added to HTML Elements * to affect visibility on certain displays. */ .hide-on-small-only .hide-on-small-and-down .hide-on-med-and-down .hide-on-med-and-up .hide-on-med-only .hide-on-large-only .show-on-large .show-on-medium .show-on-small .show-on-medium-and-up .show-on-medium-and-down ##### Sass @media #{$small-and-down} { // styles for small screens and down } @media #{$medium-and-up} { // styles for medium screens and larger } @media #{$medium-and-down} { // styles for medium screens and down } @media #{$large-and-up} { // styles for large screens and up } @media #{$extra-large-and-up} { // styles for extra large screens and up } [![ads via Carbon](https://srv.carbonads.net/static/30242/40de9b62f52f16246c1e26ac87c08661e3f3cdfe)](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVK7LCESILZ3JCASD62QMF6SDPKQKC6YI65QNCEAD5KQIFTYDTK3UCYSIT5QLHEYI52JJF6SIK53ECTNCYBZ52K) [Affordable VPS hosting from IONOS — America’s #1 price leader. Save at least 50% on every plan.](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DVK7LCESILZ3JCASD62QMF6SDPKQKC6YI65QNCEAD5KQIFTYDTK3UCYSIT5QLHEYI52JJF6SIK53ECTNCYBZ52K) [ads via Carbon](http://carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon) ![ads via Carbon](https://ad.doubleclick.net/ddm/trackimp/N2063325.3091281BUYSELLADS/B34384541.431522606;dc_trk_aid=624603183;dc_trk_cid=243154243;ord=176197696;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=$;gdpr_consent=$;ltd=;dc_tdv=1?) * [Variables](http://materializecss.com/sass.html#variables) * [Media Queries](http://materializecss.com/sass.html#media) --- # Parallax - Materialize 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. Check out the demo to get a better idea of it. [Open Demo](http://materializecss.com/parallax-demo.html)
document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.parallax'); var instances = M.Parallax.init(elems, options); }); // Or with jQuery $(document).ready(function(){ $('.parallax').parallax(); }); | Name | Type | Default | Description | | --- | --- | --- | --- | | responsiveThreshold | Number | 0 | The minimum width of the screen, in pixels, where the parallax functionality starts working. | > Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: > > > var instance = M.Parallax.getInstance(elem); > > /* jQuery Method Calls > You can still use the old jQuery plugin method calls. > But you won't be able to access instance properties. > > $('.parallax').parallax('methodName'); > $('.parallax').parallax('methodName', paramName); > */ > ##### .destroy(); Destroy plugin instance and teardown instance.destroy(); | Name | Type | Description | | --- | --- | --- | | el | Element | The DOM element the plugin was initialized with. | | options | Object | The options the instance was initialized with. | The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this. .parallax-container { height: "your height here"; } [![ads via Carbon](https://srv.carbonads.net/static/30242/eb5ed0bb22aca181689aeb20afbc4863c557056c)](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DV23EF6BICZ3JCASD62QNCTYD5KJKC6SIVK7ICAYICK7WFTSIVK7UCEYI5KQNHEYI52JJF6SIK53ECTNCYBZ52K) [Explore security tools built for AWS. Free trials, instant deployment, pay-as-you-go pricing.](https://srv.carbonads.net/ads/click/x/GTND427NC6AILKQLCWBLYKQUCY7DV23EF6BICZ3JCASD62QNCTYD5KJKC6SIVK7ICAYICK7WFTSIVK7UCEYI5KQNHEYI52JJF6SIK53ECTNCYBZ52K) [ads via Carbon](http://carbonads.net/?utm_source=materializecss&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon) * [Introduction](http://materializecss.com/parallax.html#introduction) * [Intialization](http://materializecss.com/parallax.html#initialization) * [Options](http://materializecss.com/parallax.html#options) * [Methods](http://materializecss.com/parallax.html#methods) * [Properties](http://materializecss.com/parallax.html#properites) * [Customization](http://materializecss.com/parallax.html#customization) --- # Collapsible - Materialize Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user. * _filter\_drama_First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _place_Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _whatshot_Third Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.collapsible'); var instances = M.Collapsible.init(elems, options); }); // Or with jQuery $(document).ready(function(){ $('.collapsible').collapsible(); }); ##### Preselected Section If you want a collapsible with a preopened section just add the `active` class to the collapsible-header. * _filter\_drama_First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _place_Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _whatshot_Third Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • placeSecond
    • You can customize the behavior of each collapsible using these options. For example, you can call a custom function to run when a collapsbile is opened or closed. The function passes the li element that was opened or closed as an argument. | Name | Type | Default | Description | | --- | --- | --- | --- | | accordion | Boolean | true | If accordion versus collapsible. | | onOpenStart | Function | null | Callback function called before collapsible is opened. | | onOpenEnd | Function | null | Callback function called after collapsible is opened. | | onCloseStart | Function | null | Callback function called before collapsible is closed. | | onCloseEnd | Function | null | Callback function called after collapsible is closed. | | inDuration | Number | 300 | Transition in duration in milliseconds. | | outDuration | Number | 300 | Transition out duration in milliseconds.. | You can programmatically open and close collapsibles through these methods. The second parameter is the 0-based index of the collapsible you want to open. > Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: > > > var instance = M.Collapsible.getInstance(elem); > > /* jQuery Method Calls > You can still use the old jQuery plugin method calls. > But you won't be able to access instance properties. > > $('.collapsible').collapsible('methodName'); > $('.collapsible').collapsible('methodName', paramName); > */ > ##### .open(); Open collapsible section. ###### Arguments **Integer:** Nth section to open. instance.open(3); ##### .close(); Close collapsible section. ###### Arguments **Integer:** Nth section to close. instance.close(3); ##### .destroy(); Destroy plugin instance and teardown instance.destroy(); | Name | Type | Description | | --- | --- | --- | | el | Element | The DOM element the plugin was initialized with. | | options | Object | The options the instance was initialized with. | There are two ways a collapsible can behave. It can either allow multiple sections to stay open, or it can only allow one section to stay open at a time, which is called an accordion. See below for a demo of each type. ##### Accordion * _filter\_drama_First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _place_Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _whatshot_Third Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is default behavior. ##### Expandable * _filter\_drama_First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _place_Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * _whatshot_Third Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.