Upload field component: Collapse

<div class="form-group">
    <label>Offerte uploaden</label>

    <div class="m-addItem -small rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
        <div class="d-flex flex-wrap justify-content-center align-items-center">
            <div class="mt-1">
                <div class="a-circle -sm -hover -border -pointer cursor-default">
                    <i class="icon-plus"></i>

                </div>

            </div>

            <div class="mx-2 mt-1 text-center">
                <span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
            </div>

        </div>
    </div>

    <ul class="list-group -collapse">

        <li>
            <div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer " data-toggle="collapse" data-target="#collapseListGroup6550" aria-expanded="true" aria-controls="collapseListGroup6550">
                <div class="a-circle -avatar -hover -border -pointer cursor-default">
                    <i class="icon-arrow-right-filled"></i>

                </div>

                <strong class="ml-2">Documenten</strong>

                <div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
                    <i class="icon-documents"></i>
                    <span class="ml-1">3</span>
                </div>

            </div>
            <ul class="collapse show list-group" id="collapseListGroup6550">

                <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                    <a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                    <div class="d-flex align-items-center">

                        <button type="button" class="btn btn-sm btn-primary -iconRight">

                            Genereer

                        </button>

                    </div>
                </li>
                <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                    <a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                    <div class="d-flex align-items-center">

                        <span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
                            <circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
                            <circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
                                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
                                <animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
                            </circle>
                        </svg>

                    </div>
                </li>
                <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                    <a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                    <div class="d-flex align-items-center">

                        <a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
                            <i class="icon-view"></i>

                        </a>

                        <div class="a-circle -download -sm -hover -border -pointer cursor-default">
                            <i class="icon-download-alt"></i>

                        </div>

                        <div class="a-circle -sm -hover -border -pointer cursor-default">
                            <i class="icon-bin"></i>

                        </div>

                    </div>
                </li>

            </ul>
        </li>

    </ul>
</div>