Timeline

Please refer to the Bootstrap doc for collapse elements for implementation

Implementation:

Every timeline item is delimited by a white background. Its "trigger element" is a "section title" component, which toggles the "section item" content right below it.

If a timeline item should be open when arriving on the page, add the show class to the js-timeline__itemCollapse element, and set the "aria-expanded" attribute of the sds-sectionTitle__toggle element to true.

If there's no collapsible content present, you can get rid of the js-timeline__itemCollapse element, as well as of the sds-sectionTitle__toggleWrapper element.

Remember to correctly set the IDs on each js-timeline__itemCollapse and matching data-targets on sds-sectionTitle__toggle.

Items inside the collapse can have a detail element, sds-sectionItem__collapse, which is triggered by the js-sectionItem__toggle element. Every sds-sectionItem__collapse has a data-parent attribute that references the timeline's id.

If no detail is present for the section item, you can remove js-sectionItem__toggle as well as the sds-sectionItem__collapse elements.

<!-- Default -->
<div id="timelineAccordion" class="sds-timeline">

    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Pré-autorisations
                    </div>

                </div>

            </div>

        </div>
        <div class="sds-sectionItem -isTimelineItem -hasNotif">
            <div class="sds-sectionItem__inner">
                <div class="sds-sectionItem__innerCol -date">
                    <div class="sds-sectionItem__textMeta sds-textHelper">
                        18/03/2022
                    </div>
                </div>
                <div class="sds-sectionItem__innerCol -dot">
                    <div class="sds-sectionItem__dotWrapper">
                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                            <span class="sds-icon sds-icon-adviser"></span>

                        </span>

                    </div>
                </div>
                <div class="sds-sectionItem__innerCol -grow">
                    <div class="sds-stackXs">
                        <div class="sds-amount -negative -fade">
                            <span class="sds-amount__value">{-#.###,##}</span>

                            <span class="sds-amount__currency"></span>

                        </div>
                        <div>Lorem Ipsum</div>
                    </div>
                </div>
                <div class="sds-sectionItem__innerCol">
                    <div class="sds-sectionItem__textMeta sds-textHelper">
                        En cours
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Relevé, Avril 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">450</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

                <div class="sds-sectionTitle__col -status">
                    <div class="sds-transactionState -processing">
                        <div class="sds-icon sds-icon-inprogress" aria-hidden="true"></div>
                        <div class="sds-transactionState__text">En cours</div>

                    </div>
                    <div class="sds-sectionTitle__meta sds-textHelper">
                        sera clôturé le 19.04.2023
                    </div>
                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineCollapse" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineCollapse">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 1</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test1" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test1" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test1" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 1</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 2</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test2" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test2" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test2" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 2</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 3</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test3" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test3" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test3" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 3</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Relevé, Avril 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">335,30</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

                <div class="sds-sectionTitle__col -status">
                    <div class="sds-transactionState -closed">
                        <div class="sds-icon sds-icon-hourglass" aria-hidden="true"></div>
                        <div class="sds-transactionState__text">Clôturé</div>

                    </div>
                    <div class="sds-sectionTitle__meta sds-textHelper">
                        sera débité le 19.04.2023
                    </div>
                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineCollapse2" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineCollapse2">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 4</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test4" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test4" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test4" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 4</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 5</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test5" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test5" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test5" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 5</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Relevé, Mars 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">335,30</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

                <div class="sds-sectionTitle__col -status">
                    <div class="sds-transactionState -paid">
                        <div class="sds-icon sds-icon-checkcircleborder" aria-hidden="true"></div>
                        <div class="sds-transactionState__text">Comptabilisé</div>

                    </div>
                    <div class="sds-sectionTitle__meta sds-textHelper">
                        débité le 19.04.2023
                    </div>
                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineCollapse3" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineCollapse3">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 6</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test6" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test6" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test6" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 6</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 7</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test7" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test7" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test7" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 7</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem -isLoading">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Relevé, Février 2023
                    </div>

                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineCollapse4">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

                <span class="sds-circle -loading -big sds-sectionTitle__loader"></span>

            </div>

        </div>
        <div class="js-timeline__itemCollapse collapse" id="timelineCollapse4">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                18/03/2022
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Domiciliation relevé Post Telecom Test 8</div>
                            </div>
                        </div>
                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#test8" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="test7" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        18/03/2022
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">
                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                    </div>
                                </div>
                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#test8" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">
                                <div class="h3">Domiciliation relevé Post Telecom Test 8</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Mouvements Comptes -->
<div id="timelineAccordion" class="sds-timeline">

    <a href="" class="sds-box sds-timeline__item">
        <div class="d-flex align-items-center justify-content-between">
            <div class="sds-sectionTitle -isTimelineItem">
                <div class="sds-sectionTitle__inner">
                    <div class="sds-sectionTitle__col">
                        <div class="sds-sectionTitle__textMain">
                            Mouvements futurs
                        </div>

                    </div>

                </div>

            </div>
            <span class="sds-iconCircle -ghost" aria-hidden="true">

                <span class="sds-icon sds-icon-chevronright"></span>

            </span>

        </div>
    </a>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Avril 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">953,63</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineComptesCollapse" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -epargneInvest" aria-hidden="true">

                                    <span class="sds-icon sds-icon-instrument"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>BHW Bausparkasse AG / OP</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-1-1" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-1-1" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -epargneInvest" aria-hidden="true">

                                            <span class="sds-icon sds-icon-instrument"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-1-1" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Cloche d&#39;or</div>
                            </div>
                        </div>

                        <div class="sds-sectionItem__innerCol align-self-stretch -justifyEnd">
                            <div class="sds-badge badge -badgePrimary -badgeTonal">

                                {Type}
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-1-2" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-1-2" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-1-2" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Cloche d&#39;or</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -alimentation" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingcart"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Cactus</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-1-3" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-1-3" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -alimentation" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingcart"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-1-3" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Cactus</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Mars 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">656,07</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineComptesCollapse2" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse2">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -services" aria-hidden="true">

                                    <span class="sds-icon sds-icon-service"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Apple Services</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-1" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-1" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -services" aria-hidden="true">

                                            <span class="sds-icon sds-icon-service"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-1" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Apple Services</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -epargneInvest" aria-hidden="true">

                                    <span class="sds-icon sds-icon-instrument"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>BHW Bausparkasse AG / OP</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-2" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-2" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -epargneInvest" aria-hidden="true">

                                            <span class="sds-icon sds-icon-instrument"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-2" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">BHW Bausparkasse AG / OP</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                    <span class="sds-icon sds-icon-shoppingbag"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>IBS Bookstore</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-3" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-3" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                                            <span class="sds-icon sds-icon-shoppingbag"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-3" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">IBS Bookstore</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -loisirs" aria-hidden="true">

                                    <span class="sds-icon sds-icon-vacation"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Organized tours</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-4" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-4" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -loisirs" aria-hidden="true">

                                            <span class="sds-icon sds-icon-vacation"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-4" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Organized tours</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD/MM/YYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-iconCircle -product -restos" aria-hidden="true">

                                    <span class="sds-icon sds-icon-restaurant"></span>

                                </span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">
                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Ouzeria Restaurant</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-5" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-5" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD/MM/YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-iconCircle -product -restos" aria-hidden="true">

                                            <span class="sds-icon sds-icon-restaurant"></span>

                                        </span>

                                    </div>
                                </div>

                                <div class="sds-sectionItem__innerCol -justifyEnd -grow">
                                    <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                                        <a href="" class="sds-btn -btnSecondary">

                                            <span class="sds-icon sds-icon-document"></span>

                                            <span class="sds-btn__text">Avis de débit</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                                            <span class="sds-icon sds-icon-hidden"></span>

                                        </button>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                                            <span class="sds-icon sds-icon-compose"></span>

                                        </button>
                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-5" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Ouzeria Restaurant</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Date de la transaction

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        30.09.2021
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Montant

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative">
                                                        <span class="sds-amount__value">-165</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        Pays

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        Luxembourg
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                                <div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
                                    <div class="sds-btnGroup d-flex justify-content-end">
                                        <a href="" class="sds-btn -btnSecondary -btnInverse">

                                            <span class="sds-icon sds-icon-edit"></span>

                                            <span class="sds-btn__text">Modifier</span>

                                        </a>
                                        <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                                            <span class="sds-icon sds-icon-trash"></span>

                                        </button>
                                    </div>
                                    <div class="h4 d-flex align-items-center">
                                        <span>Espace fiscal</span>
                                        <a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                        </a>
                                    </div>
                                    <div class="sds-staticExceptionStackLg">

                                        <table class="sds-infoTable table">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Catégorie fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                DS - Dépenses Spéciales
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Année fiscale

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                2022
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem -isStatic">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <span class="sds-skeletonUnit -small flex-grow-1"></span>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">
                                <span class="sds-skeletonUnit -iconCircle"></span>
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs flex-grow-1">
                                <span class="sds-skeletonUnit -small sds-sectionItem__loaderContentShort"></span>
                                <div><span class="sds-skeletonUnit -small"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionItem -isTimelineItem -isStatic">
            <div class="sds-sectionItem__inner">
                <div class="sds-sectionItem__innerCol -date"></div>
                <div class="sds-sectionItem__innerCol -dot">
                    <div class="sds-sectionItem__dotWrapper">
                        <button type="button" class="sds-btn -btnSecondary text-nowrap">

                            <span class="sds-btn__text">Charger plus</span>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionItem -isTimelineItem -isStatic">
            <div class="sds-sectionItem__inner">
                <div class="sds-sectionItem__innerCol -date">
                    <span class="sds-skeletonUnit -small flex-grow-1"></span>
                </div>
                <div class="sds-sectionItem__innerCol -dot">
                    <div class="sds-sectionItem__dotWrapper">
                        <span class="sds-skeletonUnit -iconCircle"></span>
                    </div>
                </div>
                <div class="sds-sectionItem__innerCol -grow">
                    <div class="sds-stackXs flex-grow-1">
                        <span class="sds-skeletonUnit -small sds-sectionItem__loaderContentShort"></span>
                        <div><span class="sds-skeletonUnit -small"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Mouvements Comptes Externes -->
<div id="timelineAccordion" class="sds-timeline">

    <a href="" class="sds-box sds-timeline__item">
        <div class="d-flex align-items-center justify-content-between">
            <div class="sds-sectionTitle -isTimelineItem">
                <div class="sds-sectionTitle__inner">
                    <div class="sds-sectionTitle__col">
                        <div class="sds-sectionTitle__textMain">
                            Mouvements futurs
                        </div>

                    </div>

                </div>

            </div>
            <span class="sds-iconCircle -ghost" aria-hidden="true">

                <span class="sds-icon sds-icon-chevronright"></span>

            </span>

        </div>
    </a>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Avril 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">953,63</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineComptesCollapse" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>BHW Bausparkasse AG / OP</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-1-1" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-1-1" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-1-1" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                                <span class="sds-skeletonUnit"></span>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Cloche d&#39;or</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-1-2" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-1-2" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-1-2" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Cloche d&#39;or</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Cactus</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-1-3" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-1-3" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-1-3" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Cactus</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionTitle -isTimelineItem">
            <div class="sds-sectionTitle__inner">
                <div class="sds-sectionTitle__col">
                    <div class="sds-sectionTitle__textMain">
                        Mars 2023
                    </div>

                    <div class="sds-amount -amountXl -secondary100">
                        <span class="sds-amount__value">656,07</span>

                        <span class="sds-amount__currency"></span>

                    </div>

                </div>

            </div>

            <div class="sds-sectionTitle__toggleWrapper">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sectionTitle__toggle stretched-link" data-toggle="collapse" data-target="#timelineComptesCollapse2" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                    <div class="sr-only">Toggle transactions list</div>

                </button>

            </div>

        </div>
        <div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse2">
            <div class="sds-timeline__collapseInner">
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Apple Services</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-1" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-1" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-1" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Apple Services</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>BHW Bausparkasse AG / OP</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-2" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-2" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-2" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">BHW Bausparkasse AG / OP</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>IBS Bookstore</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-3" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-3" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-3" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">IBS Bookstore</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Organized tours</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-4" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-4" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-4" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Organized tours</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <div class="sds-sectionItem__textMeta sds-textHelper">
                                {DD.MM.YYYY}
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">

                                <span class="sds-circle"></span>

                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs">

                                <div class="sds-amount -negative">
                                    <span class="sds-amount__value">{-#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                </div>

                                <div>Ouzeria Restaurant</div>
                            </div>
                        </div>

                        <button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button" data-target="#collapse-2-5" data-toggle="collapse" aria-expanded="false">
                            <span class="sr-only">Show transaction detail</span>
                        </button>
                    </div>
                    <div class="sds-sectionItem__collapse collapse" id="collapse-2-5" data-parent="#timelineAccordion">
                        <div class="sds-box sds-sectionItem__detail">
                            <div class="sds-sectionItem__detailInner">
                                <div class="sds-sectionItem__innerCol -date">
                                    <div class="sds-sectionItem__textMeta sds-textHelper">
                                        {DD.MM.YYYY}
                                    </div>
                                </div>
                                <div class="sds-sectionItem__innerCol -dot">
                                    <div class="sds-sectionItem__dotWrapper">

                                        <span class="sds-circle"></span>

                                    </div>
                                </div>

                                <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button" data-target="#collapse-2-5" data-toggle="collapse" aria-expanded="true">
                                    <span class="sr-only">Close detail</span>
                                </button>
                            </div>
                            <div class="sds-sectionItem__detailContent">

                                <div class="h3">Ouzeria Restaurant</div>

                                <table class="sds-infoTable table">
                                    <tbody>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-amount -negative -amountXl">
                                                        <span class="sds-amount__value">{- #.###,##}</span>

                                                        <span class="sds-amount__currency"></span>

                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div class="sds-label">
                                                        {Label}

                                                    </div>

                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="sds-infoTable__cellContent">

                                                    <div>
                                                        {item}
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-sectionItem -isTimelineItem -isStatic">
                    <div class="sds-sectionItem__inner">
                        <div class="sds-sectionItem__innerCol -date">
                            <span class="sds-skeletonUnit -small flex-grow-1"></span>
                        </div>
                        <div class="sds-sectionItem__innerCol -dot">
                            <div class="sds-sectionItem__dotWrapper">
                                <span class="sds-skeletonUnit -circle"></span>
                            </div>
                        </div>
                        <div class="sds-sectionItem__innerCol -grow">
                            <div class="sds-stackXs flex-grow-1">
                                <span class="sds-skeletonUnit -small sds-sectionItem__loaderContentShort"></span>
                                <div><span class="sds-skeletonUnit -small"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sds-box sds-timeline__item">
        <div class="sds-sectionItem -isTimelineItem -isStatic">
            <div class="sds-sectionItem__inner">
                <div class="sds-sectionItem__innerCol -date"></div>
                <div class="sds-sectionItem__innerCol -dot">
                    <div class="sds-sectionItem__dotWrapper">
                        <button type="button" class="sds-btn -btnSecondary text-nowrap">

                            <span class="sds-btn__text">Charger plus</span>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Mouvements Empty -->
<div id="timelineAccordion" class="sds-timeline">

    <a href="" class="sds-box sds-timeline__item">
        <div class="d-flex align-items-center justify-content-between">
            <div class="sds-sectionTitle -isTimelineItem">
                <div class="sds-sectionTitle__inner">
                    <div class="sds-sectionTitle__col">
                        <div class="sds-sectionTitle__textMain">
                            Mouvements futurs
                        </div>

                    </div>

                </div>

            </div>
            <span class="sds-iconCircle -ghost" aria-hidden="true">

                <span class="sds-icon sds-icon-chevronright"></span>

            </span>

        </div>
    </a>
    <div class="sds-emptyState sds-box -insetLg sds-timeline__item h-100">
        <span class="sds-emptyState__icon sds-icon sds-icon-list-l"></span>
        <div class="sds-stackXxs">
            <p class="sds-emptyState__text sds-textSemiBold sds-textBodyLg">{Title}</p>

            <p class="sds-emptyState__text sds-textSemiBold">{Subtitle}</p>

        </div>

    </div>

</div>

<!-- Default -->
{% extends "@snet-timeline-frame" %}

{% block timelineContent %}
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title",
			{
				text: "Pré-autorisations"
			}
			,true %}
		{% render "@snet-section-item--timeline-notif", {
			communication: "Domiciliation relevé Post Telecom Test 0"
		},true %}
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--transaction-processing",
			{
				sectionTitleAmountText: "450",
				loading: true,
				toggleOptions: {
					"data-toggle": "collapse",
					"data-target": "#timelineCollapse",
					"aria-expanded": "true"
				}
			}
		,true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineCollapse">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 1",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test1",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test1",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 1",
						detailToggleOptions: {
							"data-target": "#test1",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 2",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test2",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test2",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 2",
						detailToggleOptions: {
							"data-target": "#test2",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 3",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test3",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test3",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 3",
						detailToggleOptions: {
							"data-target": "#test3",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--transaction-closed",
			{
				toggleOptions: {
					"data-toggle": "collapse",
					"data-target": "#timelineCollapse2",
					"aria-expanded": "true"
				}
			}
			,true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineCollapse2">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 4",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test4",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test4",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 4",
						detailToggleOptions: {
							"data-target": "#test4",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 5",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test5",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test5",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 5",
						detailToggleOptions: {
							"data-target": "#test5",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--transaction-paid",
			{
				text: "Relevé, Mars 2023",
				toggleOptions: {
					"data-toggle": "collapse",
					"data-target": "#timelineCollapse3",
					"aria-expanded": "true"
				}
			}
			,true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineCollapse3">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 6",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test6",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test6",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 6",
						detailToggleOptions: {
							"data-target": "#test6",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 7",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test7",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test7",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 7",
						detailToggleOptions: {
							"data-target": "#test7",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--loading",
			{
				text: "Relevé, Février 2023",
				toggleOptions: {
				"data-toggle": "collapse",
				"data-target": "#timelineCollapse4"
			}
			}
			,true %}
		<div class="js-timeline__itemCollapse collapse" id="timelineCollapse4">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail", {
					communication: "Domiciliation relevé Post Telecom Test 8",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#test8",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "test7",
					sectionItemDetailOptions: {
						communication: "Domiciliation relevé Post Telecom Test 8",
						detailToggleOptions: {
							"data-target": "#test8",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
			</div>
		</div>
	</div>
{% endblock %}

<!-- Mouvements Comptes -->
{% extends "@snet-timeline-frame" %}

{% block timelineContent %}
	<a href="" class="{{ namespace }}box {{ namespace }}timeline__item">
		<div class="d-flex align-items-center justify-content-between">
			{% render "@snet-section-title",{text: "Mouvements futurs"} ,true %}
			{% render "@icon-circle-regular--ghost",{
				icon: "icon-chevronright"
			},true %}
		</div>
	</a>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--amount",
			{
				text: "Avril 2023",
				sectionTitleAmountText: "953,63",
				toggleOptions: {
					"data-toggle": "collapse",
					"data-target": "#timelineComptesCollapse",
					"aria-expanded": "true"
				}
			},true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--epargne-invest",
					communication: "BHW Bausparkasse AG / OP",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-1-1",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-1-1",
					sectionItemDetailOptions: {
						communication: "BHW Bausparkasse AG / OP",
						detailToggleOptions: {
							"data-target": "#collapse-1-1",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					loading: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					communication: "Cloche d'or",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-1-2",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-1-2",
					sectionItemDetailOptions: {
						communication: "Cloche d'or",
						detailToggleOptions: {
							"data-target": "#collapse-1-2",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					pdf: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--alimentation",
					communication: "Cactus",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-1-3",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-1-3",
					sectionItemDetailOptions: {
						communication: "Cactus",
						detailToggleOptions: {
							"data-target": "#collapse-1-3",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--amount",
			{
				text: "Mars 2023",
				sectionTitleAmountText: "656,07",
				toggleOptions: {
				"data-toggle": "collapse",
				"data-target": "#timelineComptesCollapse2",
				"aria-expanded": "true"
			}
			},true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse2">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--services",
					communication: "Apple Services",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-1",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-1",
					sectionItemDetailOptions: {
						communication: "Apple Services",
						detailToggleOptions: {
							"data-target": "#collapse-2-1",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--epargne-invest",
					communication: "BHW Bausparkasse AG / OP",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-2",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-2",
					sectionItemDetailOptions: {
						communication: "BHW Bausparkasse AG / OP",
						detailToggleOptions: {
							"data-target": "#collapse-2-2",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--shopping",
					communication: "IBS Bookstore",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-3",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-3",
					sectionItemDetailOptions: {
						communication: "IBS Bookstore",
						detailToggleOptions: {
							"data-target": "#collapse-2-3",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--loisirs",
					communication: "Organized tours",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-4",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-4",
					sectionItemDetailOptions: {
						communication: "Organized tours",
						detailToggleOptions: {
							"data-target": "#collapse-2-4",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte", {
					product: "--restos",
					communication: "Ouzeria Restaurant",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-5",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-5",
					sectionItemDetailOptions: {
						communication: "Ouzeria Restaurant",
						detailToggleOptions: {
							"data-target": "#collapse-2-5",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					}
				},true %}
				{% render "@snet-section-item--timeline-loading" %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-item--timeline-load-more" %}
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-item--timeline-loading" %}
	</div>
{% endblock %}

<!-- Mouvements Comptes Externes -->
{% extends "@snet-timeline-frame" %}

{% block timelineContent %}
	<a href="" class="{{ namespace }}box {{ namespace }}timeline__item">
		<div class="d-flex align-items-center justify-content-between">
			{% render "@snet-section-title",{text: "Mouvements futurs"} ,true %}
			{% render "@icon-circle-regular--ghost",{
				icon: "icon-chevronright"
			},true %}
		</div>
	</a>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--amount",
			{
				text: "Avril 2023",
				sectionTitleAmountText: "953,63",
				toggleOptions: {
					"data-toggle": "collapse",
					"data-target": "#timelineComptesCollapse",
					"aria-expanded": "true"
				}
			},true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--epargne-invest",
					communication: "BHW Bausparkasse AG / OP",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-1-1",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-1-1",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "BHW Bausparkasse AG / OP",
						detailToggleOptions: {
							"data-target": "#collapse-1-1",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					loading: true,
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					communication: "Cloche d'or",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-1-2",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-1-2",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "Cloche d'or",
						detailToggleOptions: {
							"data-target": "#collapse-1-2",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--alimentation",
					communication: "Cactus",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-1-3",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-1-3",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "Cactus",
						detailToggleOptions: {
							"data-target": "#collapse-1-3",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-title--amount",
			{
				text: "Mars 2023",
				sectionTitleAmountText: "656,07",
				toggleOptions: {
				"data-toggle": "collapse",
				"data-target": "#timelineComptesCollapse2",
				"aria-expanded": "true"
			}
			},true %}
		<div class="js-timeline__itemCollapse  collapse show" id="timelineComptesCollapse2">
			<div class="{{ namespace }}timeline__collapseInner">
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--services",
					communication: "Apple Services",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-1",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-1",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "Apple Services",
						detailToggleOptions: {
							"data-target": "#collapse-2-1",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--epargne-invest",
					communication: "BHW Bausparkasse AG / OP",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-2",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-2",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "BHW Bausparkasse AG / OP",
						detailToggleOptions: {
							"data-target": "#collapse-2-2",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--shopping",
					communication: "IBS Bookstore",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-3",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-3",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "IBS Bookstore",
						detailToggleOptions: {
							"data-target": "#collapse-2-3",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--loisirs",
					communication: "Organized tours",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-4",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-4",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "Organized tours",
						detailToggleOptions: {
							"data-target": "#collapse-2-4",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-detail-mouvements-compte-externe", {
					product: "--restos",
					communication: "Ouzeria Restaurant",
					parentCollapse: "#timelineAccordion",
					sectionItemToggleOptions: {
						"data-target": "#collapse-2-5",
						"data-toggle": "collapse",
						"aria-expanded": "false"
					},
					collapseID: "collapse-2-5",
					sectionItemDetailOptions: {
						noActions: true,
						communication: "Ouzeria Restaurant",
						detailToggleOptions: {
							"data-target": "#collapse-2-5",
							"data-toggle": "collapse",
							"aria-expanded": "true"
						}
					},
					noCategory: true
				},true %}
				{% render "@snet-section-item--timeline-loading-externe" %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}box {{ namespace }}timeline__item">
		{% render "@snet-section-item--timeline-load-more" %}
	</div>
{% endblock %}

<!-- Mouvements Empty -->
{% extends "@snet-timeline-frame" %}

{% block timelineContent %}
    <a href="" class="{{ namespace }}box {{ namespace }}timeline__item">
        <div class="d-flex align-items-center justify-content-between">
            {% render "@snet-section-title",{text: "Mouvements futurs"} ,true %}
            {% render "@icon-circle-regular--ghost",{
                icon: "icon-chevronright"
            },true %}
        </div>
    </a>
    {% render '@snet-empty-state--no-result',{
        icon: "icon-list-l",
        text: "{Title}",
        subText: "{Subtitle}",
        textBodyLg: true,
        classes: [namespace + "timeline__item","h-100"]
    }, true %}
{% endblock %}
  • Content:
    export default class Timeline {
    
    	constructor() {
    		this.hideTrigger()
    	}
    
    	hideTrigger () {
    
    		$(".sds-timeline__item .js-timeline__itemCollapse").each(function( index, element ) {
    			$(element).on("hide.bs.collapse", function (e) {
    				$(e.target).find(".sds-sectionItem__collapse.show").collapse("hide");
    			});
    		})
    
    		$(".sds-timeline__collapseInner .collapse").each(function( index, element ) {
    			$(element).on("show.bs.collapse", function (e) {
    				$(e.target).closest(".sds-sectionItem").addClass("-detailShown");
    			});
    		})
    
    		$(".sds-timeline__collapseInner .collapse").each(function( index, element ) {
    			$(element).on("hide.bs.collapse", function (e) {
    				$(e.target).closest(".sds-sectionItem").removeClass("-detailShown");
    			});
    		})
    
    	}
    
    }
    
  • URL: /components/raw/snet-timeline/Timeline.js
  • Filesystem Path: components/snet/organisms/timeline/Timeline.js
  • Size: 760 Bytes
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $timeline-item-horiz-padding: $timeline-item-horiz-padding-global;
    $timeline-item-vert-padding: $timeline-item-vert-padding-global;
    $timeline-item-content-negative-margin: $timeline-item-content-negative-margin-global;
    .#{$namespace}timeline {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	@include spacer-component-stack("md");
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	// timeline__item
    	&__item {
    
    		// follows same logic as parent
    
    		@include spacer-component-inset-horiz-greater("md", "lg");
    		position: relative;
    		z-index: z("zero");
    		display: block;
    
    		&::before {
    
    			content: "";
    			width: 2px;
    			position: absolute;
    			z-index: z("low");
    			bottom: 100%;
    			height: $timeline-item-vert-padding*3;
    			left: $timeline-item-horiz-padding + $section-item-col-date-width-global + $section-item-horiz-margin-global + math.div($section-item-col-dot-width-global, 2);
    			transform: translateX(-50%) translateY($timeline-item-vert-padding);
    			background-color: map-deep-get($token-color-brand-map, "secondary", "30");
    
    		}
    
    		&:first-child {
    
    			&::before {
    
    				height: $timeline-item-vert-padding;
    				left: $timeline-item-horiz-padding + $section-item-col-date-width-global + $section-item-horiz-margin-global + math.div($section-item-col-dot-width-global, 2);
    
    			}
    
    		}
    
    		&:not(:last-child) {
    
    			.#{$namespace}sectionItem.-isTimelineItem:last-child:only-child {
    				.#{$namespace}sectionItem__inner {
    					.#{$namespace}sectionItem__innerCol {
    						&.-dot {
    							&::before {
    								bottom: -($timeline-item-vert-padding) !important;
    							}
    						}
    					}
    				}
    			}
    
    		}
    
    		&:last-child {
    
    			.#{$namespace}sectionTitle {
    				&::before {opacity: 0;}
    			}
    
    			.#{$namespace}sectionItem.-isTimelineItem:last-child {
    				.#{$namespace}sectionItem__inner {
    					.#{$namespace}sectionItem__innerCol {
    						&.-dot {
    							&::before {bottom: 50%;}
    						}
    					}
    				}
    			}
    
    			#{$self}__collapseInner {
    
    				position: relative;
    
    				&::before {
    
    					content: "";
    					width: $border-width*2;
    					position: absolute;
    					z-index: z("low");
    					bottom: 100%;
    					height: $timeline-item-vert-padding;
    					left: $section-item-col-date-width-global + $section-item-horiz-margin-global + math.div($section-item-col-dot-width-global, 2);
    					transform: translateX(-50%) translateY($timeline-item-vert-padding);
    					background-color: map-deep-get($token-color-brand-map, "secondary", "30");
    
    				}
    
    			}
    
    			&.-empty {
    
    				&::before {
    
    					transform: translateX(-50%) translateY(0);
    					height: $timeline-item-vert-padding*2;
    
    				}
    
    			}
    
    		}
    
    		.#{$namespace}sectionTitle.-isTimelineItem,
    		.#{$namespace}sectionItem.-isTimelineItem {
    
    			margin-left: -($timeline-item-content-negative-margin);
    			margin-right: -($timeline-item-content-negative-margin);
    
    		}
    
    		.#{$namespace}sectionTitle.-isTimelineItem {
    			padding-left: map-deep-get($token-spacer-unit-map, "8");
    			padding-right: map-deep-get($token-spacer-unit-map, "8");
    		}
    
    	}
    
    	&__collapseInner {
    
    		padding-top: $timeline-item-vert-padding;
    
    	}
    
    
    	/* modifiers */
    
    	// timeline -firstItemNoLine
    	&.-firstItemNoLine {
    
    		// follows same logic as base element
    
    		#{$self}__item:first-of-type {
    
    			&::before {
    
    				content: none;
    
    			}
    
    		}
    
    	}
    
    	&.-hasEmptyItems {
    
    		display: flex;
    		flex-direction: column;
    		height: 100%;
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-timeline/_timeline.scss
  • Filesystem Path: components/snet/organisms/timeline/_timeline.scss
  • Size: 3.9 KB