<div class="amtheme-left-menu">
    <div class="amtheme-collapsible-container"
         data-bind="mageInit: {
            'collapsible':  {
                'openedState': '-active',
                'animate': 400
            }}">
        <div class="amtheme-title"  data-role="title">Set 1</div>
        <div class="amtheme-content"  data-role="content">
            <ul class="amtheme-items" >
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/hoodies-and-sweatshirts-women.html"
                       title="Link 1">Link 1</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/jackets-women.html"
                       title="Link 2">Link 2</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tees-women.html"
                       title="Link 3">Link 3</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tanks-women.html"
                       title="Link 4">Link 4</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/pants-women.html"
                       title="Link 5">Link 5</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/shorts-women.html"
                       title="Link 6">Link 6</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="amtheme-collapsible-container"
         data-bind="mageInit: {
            'collapsible':  {
                'openedState': '-active',
                'animate': 400
            }}">
        <div class="amtheme-title"  data-role="title">Set 2</div>
        <div class="amtheme-content"  data-role="content">
            <ul class="amtheme-items" >
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/hoodies-and-sweatshirts-women.html"
                       title="Link 1">Link 1</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/jackets-women.html"
                       title="Link 2">Link 2</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tees-women.html"
                       title="Link 3">Link 3</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tanks-women.html"
                       title="Link 4">Link 4</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/pants-women.html"
                       title="Link 5">Link 5</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/shorts-women.html"
                       title="Link 6">Link 6</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="amtheme-collapsible-container"
         data-bind="mageInit: {
            'collapsible':  {
                'openedState': '-active',
                'animate': 400
            }}">
        <div class="amtheme-title"  data-role="title">Set 3</div>
        <div class="amtheme-content"  data-role="content">
            <ul class="amtheme-items" >
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/hoodies-and-sweatshirts-women.html"
                       title="Link 1">Link 1</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/jackets-women.html"
                       title="Link 2">Link 2</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tees-women.html"
                       title="Link 3">Link 3</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tanks-women.html"
                       title="Link 4">Link 4</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/pants-women.html"
                       title="Link 5">Link 5</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/shorts-women.html"
                       title="Link 6">Link 6</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="amtheme-collapsible-container"
         data-bind="mageInit: {
            'collapsible':  {
                'openedState': '-active',
                'animate': 400
            }}">
        <div class="amtheme-title"  data-role="title">Set 4</div>
        <div class="amtheme-content"  data-role="content">
            <ul class="amtheme-items" >
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/hoodies-and-sweatshirts-women.html"
                       title="Link 1">Link 1</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/jackets-women.html"
                       title="Link 2">Link 2</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tees-women.html"
                       title="Link 3">Link 3</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/tops-women/tanks-women.html"
                       title="Link 4">Link 4</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/pants-women.html"
                       title="Link 5">Link 5</a>
                </li>
                <li class="amtheme-item">
                    <a href="{{store url=''}}women/bottoms-women/shorts-women.html"
                       title="Link 6">Link 6</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<style>
    .amtheme-collapsible-container .amtheme-title {
        position: relative;
        box-sizing: border-box;
        padding: 15px 20px 15px 0;
        width: 100%;
        cursor: pointer;
    }

    .amtheme-collapsible-container .amtheme-title:after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 20px;
        height: 20px;
        background: url(data:image/svg+xml;base64, ) no-repeat 100% / contain;
        content: '';
        transition: transform .2s ease-in-out;
        transform: translateY(-50%);
    }

    .amtheme-collapsible-container.-active .amtheme-title:after {
        transform: translateY(-50%) rotateZ(180deg);
    }

    .amtheme-collapsible-container .amtheme-content {
        display: none;
        padding: 5px 0;
    }

    .amtheme-collapsible-container .amtheme-items {
        margin: 0;
        padding: 0;
        list-style: none none;
    }

    .amtheme-collapsible-container .amtheme-item {
        margin: 0 0 10px;
        padding: 2px 0;
    }

    .amtheme-collapsible-container .amtheme-item a {
        color: #070605;
        font-weight: 400;
    }

    .amtheme-collapsible-container .amtheme-item a:hover {
        color: #7aa022;
        font-weight: 400;
    }

    @media only screen and (min-width: 640px) and (max-width: 767px) {
        .amtheme-left-menu {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .amtheme-collapsible-container {
            flex-basis: 43%;
        }
    }

    @media only screen and (min-width: 768px) {
        .amtheme-collapsible-container .amtheme-content {
            padding: 5px 10px 15px;
        }
    }
</style>
