examples/dropdown/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dropdown Example</title>

    <link rel="stylesheet" href="../_example.css">
    <link rel="stylesheet" href="../_utilities.css">

    <link rel="stylesheet" href="dropdown.css">

    <script src="../../dist/ctrly.js"></script>

    <script src="dropdown.js"></script>
</head>
<body>

<h1>Dropdown Example</h1>

<div class="dropdown">
    <button
        class="button-reset dropdown-control"
        data-ctrly="dropdown-target"
    >
        Dropdown <span class="dropdown-control-caret" aria-hidden="true"></span>
    </button>

    <section
            id="dropdown-target"
            class="dropdown-target"
    >
        <ul>
            <li>
                <a href="https://google.com">google.com</a>
            </li>
            <li>
                <a href="https://bing.com">bing.com</a>
            </li>
        </ul>
    </section>
</div>

<div class="dropdown">
    <button
        class="button-reset dropdown-control"
        data-ctrly="dropdown-target-expanded"
        data-ctrly-open
    >
        Expanded Dropdown <span class="dropdown-control-caret" aria-hidden="true"></span>
    </button>

    <section
            class="dropdown-target"
            id="dropdown-target-expanded"
    >
        <ul>
            <li>
                <a href="https://google.com">google.com</a>
            </li>
            <li>
                <a href="https://bing.com">bing.com</a>
            </li>
        </ul>
    </section>
</div>

</body>
</html>