Layered Dropdown

gistfile1.txt

<style>
    
    .dropdown-header {
        display: block;
        padding: 5px 16px;
        font-size: 14px;
        line-height: 1.5;
        color: #535353;
        white-space: nowrap;
        font-weight: 700;
    }
    
</style>


  
  
<h3>Tiered Dropdown</h3>


<style>
.dropdown-menu .dropdown-submenu-toggle {
    display: flex;
    align-items: center;
}

.dropdown-submenu-toggle > .caret {
    color: rgb(52 58 64 / 50%);
    margin-left: auto;
    transform: rotate(-90deg);
    transition: transform 125ms;
}

.dropdown-submenu-toggle.open > .caret {
    transform: rotate(0deg);
}

.dropdown-submenu > ul.dropdown-menu {
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    list-style: none;
    border: 0;
    width: 100%;
}

.dropdown-submenu > .dropdown-menu>li>a {
    padding-left: 40px;
}
</style>


<script>
// jquery ready
$(document).ready(function() {
    // Make Dropdown Submenus possible
    $('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass('open').next('ul').toggle();
    });
});
</script>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Add Another Account <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Benevolence</a></li>
        <li><a href="#">Mission Christmas</a></li>
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-submenu-toggle">Support <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Auten, Joel & Haley</a></li>
                <li><a href="#">Cooper, Bethany</a></li>
                <li><a href="#">Daniel, Bradley & Katie</a></li>
                <li><a href="#">Hedges, Amanda</a></li>
                <li><a href="#">McCue, Samantha</a></li>
                <li><a href="#">Northrop, Dusty & Heather</a></li>
                <li><a href="#">Roberts, Hannah</a></li>
                <li><a href="#">Rothove, Brian</a></li>
                <li><a href="#">Speak, Miranda (Kairos)</a></li>
                <li><a href="#">Swank, Steven & Maddy</a></li>
                <li><a href="#">Topping, Nic & Kennedy</a></li>
            </ul>
        </li>

        <li class="dropdown-submenu">
            <a href="#" class="dropdown-submenu-toggle">Local Outreach <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">KC Dream Center</a></li>
            </ul>
        </li>
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-submenu-toggle">Mission 2023 <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Eastern Mediterranean 2023</a></li>
                <li><a href="#">Utah Spring 2023</a></li>
                <li><a href="#">Utah Fall 2023</a></li>
            </ul>
        </li>
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-submenu-toggle">Building Fund <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Olathe Building</a></li>
                <li><a href="#">Ottawa Building</a></li>
                <li><a href="#">Kansas City, KS Building</a></li>
            </ul>
        </li>

        <li><a href="#">Lifesong Adoption Fund</a></li>
        <li><a href="#">Hilltop Church - Utah (Jared Gregory Plan)</a></li>
        <li><a href="#">Life Grillers Contribution</a></li>
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-submenu-toggle">Camp <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">LifeMission Kids</a></li>
                <li><a href="#">LifeMission Youth</a></li>
            </ul>
        </li>
    </ul>
</div>

<hr>