Here is the syntax of a simple collapsible:įollowing are the collapsible classes provided by materialize with their purpose: It allow to hide the content that is not immediately relevant to the user.

ISRO CS Syllabus for Scientist/Engineer ExamĬollapsibles are accordion elements that allow you to expand or collapse the content when tapped and are useful to provide a compact presentation of the content.

ISRO CS Original Papers and Official Keys.

GATE CS Original Papers and Official Keys.For that, you may override the existing CSS classes and provide your own values for different properties like background-color, border etc. You may want to change the default look to match with the theme of your website for the accordion or some other collapsible style. Give some colors and other styles in collapsibleĪs you have seen in the above examples, the default collapsible is simple with white background and grayish borders.

The image won’t speak itself so have a look at the live demo online to experience it yourself.įor popout style collapsible, just add the popout class in the with collapsible class. The popout style also opens single section at a time that opens in a popout style as the section’s heading/panel is pressed. Have a look at the example with three sections: In the div with the collapsible-header class, you may place an icon with the title for each section in accordion/collapsible. Inside the tags, two elements are used and assigned the collapsible-header and collapsible-body classes. The example of simple Materialize Collapsible/Accordionįor creating a collapsible component, the tag is assigned the collapsible class. That way, the space on a web page can be utilized smartly for sections/components that are more interesting to the user.įor creating collapsible/accordion in your webpage, use the, tags with collapsible, collapsible-header and collapsible-bodyclasses as shown in the examples below. The user may click on the header panel for displaying the content anytime. The collapsible component allows you hiding the content within a webpage that a user does not want to interact with for time being. For creating accordion/collapsible in your web pages, you may utilize the built-in component of Materialize CSS easily.

Materialize collapsible