HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Collapsible block allows you to hide or display the contents - for storing part of the information useful.
To create a collapsible content block, you need to add the container data-role = "collapsible" attribute. In the container (div) inside, add a header element (H1-H6), followed by the extension you want to make HTML tags:
By default, the content is being folded. To expand the content when the page loads, use the data-collapsed = "false":
Collapsible content blocks can be nested to each other:
Collapsible content blocks can be nested several times according to your needs. |
Foldable collapsible block set is grouped together (like an accordion). When a new block is deployed, all the other blocks will be folded.
Create several collapsible content block, then the contents of the block surrounded by the collapsible container with a new data-role = "collapsible-set" of:
Cancel fillet with margins through data-inset attribute
How to cancel the outside corner with a collapsible block distance.
Through data-mini mini attribute of collapsible blocks
How to make collapsible block smaller.
Change the icon by data-collapsed-icon and data-expanded-icon
How to change the icon to collapse block (the default is + and -).
The fold-pop
Create a drawer in the pop.
Edit icon location
In the drawer of how to modify the position of the icon (the default is on the left).