Collapse

https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

Collapse

ready
<div class="ds-block">

    <p>Study online now and on campus later. <button class="ds-btn-link ds-icon-chevron-down ds-collapse__trigger" aria-controls="further1" aria-expanded="false" >Read more</button></p>
    <div  id="further1" class="ds-collapse__content" role="region" hidden>
        <p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal health authorities.</p>
        <p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For example, how we deliver some courses might change from face-to-face to online for a while; academic start dates and subject availabilities might be adjusted for some courses to ensure that students can progress; and access to work-integrated learning opportunities such as clinical placements might be limited for a period of time. However, our aim is to always provide an excellent learning experience and outcomes for our students.</p>
        <p>We will make our best efforts to limit disruption and to inform future students as soon as possible if any changes are made to our current courses.</p>
        <p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to start on 20th July. Book a consultation or call us if anything is unclear and we’ll be happy to help.</p>
    </div>

    <p>Study online now and on campus later. <button class="ds-btn-primary ds-btn--small ds-icon-chevron-down ds-collapse__trigger" aria-controls="further2" aria-expanded="false" >Read more</button></p>
    <div  id="further2" class="ds-collapse__content" role="region" hidden>
        <p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal health authorities.</p>
        <p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For example, how we deliver some courses might change from face-to-face to online for a while; academic start dates and subject availabilities might be adjusted for some courses to ensure that students can progress; and access to work-integrated learning opportunities such as clinical placements might be limited for a period of time. However, our aim is to always provide an excellent learning experience and outcomes for our students.</p>
        <p>We will make our best efforts to limit disruption and to inform future students as soon as possible if any changes are made to our current courses.</p>
        <p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to start on 20th July. Book a consultation or call us if anything is unclear and we’ll be happy to help.</p>
    </div>

</div>

Collapse

ready

Collapse in modal

<div class="ds-block">

    <p>Study online now and on campus later. <button class="ds-btn-link ds-icon-chevron-down ds-collapse__trigger"
            aria-controls="further1" aria-expanded="false">Read more</button></p>
    <div id="further1" class="ds-collapse__content" role="region" hidden>
        <p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal health
            authorities.</p>
        <p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For example, how we
            deliver some courses might change from face-to-face to online for a while; academic start dates and subject
            availabilities might be adjusted for some courses to ensure that students can progress; and access to
            work-integrated learning opportunities such as clinical placements might be limited for a period of time.
            However, our aim is to always provide an excellent learning experience and outcomes for our students.</p>
        <p>We will make our best efforts to limit disruption and to inform future students as soon as possible if any
            changes are made to our current courses.</p>
        <p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to start on
            20th July. Book a consultation or call us if anything is unclear and we’ll be happy to help.</p>
    </div>


</div>


<div class="ds-block">

    <p><button class="ds-btn-primary" data-modal-content="uniqueId" data-modal-width="">Open Modal</button></p>
    <div id="uniqueId" class="ds-modal-content">

        <div class="ds-block">

            <p>Study online now and on campus later. <button
                    class="ds-btn-primary ds-btn--small ds-icon-chevron-down ds-collapse__trigger"
                    aria-controls="further2" aria-expanded="false">Read more</button></p>
            <div id="further2" class="ds-collapse__content" role="region" hidden>
                <p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal
                    health authorities.</p>
                <p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For
                    example, how we deliver some courses might change from face-to-face to online for a while; academic
                    start dates and subject availabilities might be adjusted for some courses to ensure that students
                    can progress; and access to work-integrated learning opportunities such as clinical placements might
                    be limited for a period of time. However, our aim is to always provide an excellent learning
                    experience and outcomes for our students.</p>
                <p>We will make our best efforts to limit disruption and to inform future students as soon as possible
                    if any changes are made to our current courses.</p>
                <p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to
                    start on 20th July. Book a consultation or call us if anything is unclear and we’ll be happy to
                    help.</p>
            </div>
        </div>


    </div>

</div>