Collapse

How do i create collapse by using styles from CusMeDroid?

Version 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Follow the code below :

<!DOCTYPE html>
<html>
    <head>
        <title>Collapse | CusMeDroid</title>
        <link rel='stylesheet' type='text/css' href='https://cusmedroid.github.io/css/style.css'>
    </head>
    <body>
        <button class='collapsible black-bg Trirong'>Collapse</button>
        <div class='clp-content Trirong'>
            <div class='padd-10'>
                <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
        </div>
        <script type='text/javascript' src='https://cusmedroid.github.io/js/collapse.js'></script>
    </body>
</html>

Version 2

Home About Contact Roadmap

Follow the code below :

<!DOCTYPE html>
<html>
    <head>
        <title>Collapse | CusMeDroid</title>
        <link rel='stylesheet' type='text/css' href='https://cusmedroid.github.io/css/style.css'>
    </head>
    <body>
        <button class='collapsible black-bg Trirong'>Collapse</button>
        <div class='clp-content Trirong'>
            <a title='Home' href=''>Home</a>
            <a title='About' href=''>About</a>
            <a title='Contact' href=''>Contact</a>
            <a title='Roadmap' href=''>Roadmap</a>
        </div>
        <script type='text/javascript' src='https://cusmedroid.github.io/js/collapse.js'></script>
    </body>
</html>

Note

With a cusmedroid stylesheet, it makes it very easy for you to pick up some style features.
And you can Replace the background on the 'black-bg' class with another one, or add another class. Read our Docs.

If you want this collapse to appear in mobile mode add 'aclp' to the class button.

Example :

<button class='collapsible aclp black-bg Trirong'>Collapse</button>

Search →