Simple Accordions, Showhides, Flyouts and Modals

Example: Simple Show/hide element

<style>
    section.demo {
        display: flex;
        flex-wrap: wrap;
    }

    section.demo > * {
        flex: 0 0 100%;
    }

    .adz-trigger {
        display: flex;
        border: 1px solid #ccc;
        padding: 1rem;
        justify-content: center;
        align-items: center;
        background-color: #f2f2f2;
        cursor: pointer;
    }

    section.demo .adz-target {
        display: none;
    }
</style>

<section class="demo">
    <div class="adz-trigger">
        Trigger
    </div>
    <div class="adz-target">
        A Target Element
    </div>
</section>