<section class="ds-example example-show-hide">
    <div class="html">
        <p class="h3">Afficher/masquer</p>
        <div class="show-hide" data-height="105" data-height-md="125" data-height-lg="135">
            <div class="show-hide-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda blanditiis hic
                    inventore libero magnam, modi quisquam quod sint tenetur veniam! Ab eos eum fuga inventore
                    itaque iure nemo quae quasi!
                </p>
                <p>Consequatur ea excepturi nemo praesentium provident quos rem. Ab architecto, atque dolore
                    dolores, earum est explicabo hic id itaque laborum mollitia nobis odio, odit officia
                    possimus quia quos rem voluptatum.
                </p>
                <p>Alias culpa, deleniti dolor eaque iusto laborum, molestias nihil obcaecati officiis
                    pariatur porro quas quia quos repellendus reprehenderit repudiandae totam. Corporis
                    distinctio doloremque dolorum excepturi iste maiores officia quis voluptates!
                </p>
            </div>
            <div class="show-hide-footer">
                <div class="show-hide-footer-container">
                    <a href="#" class="show-hide-footer-link">
                        <span class="text-read-more">{{ 'app.ui.read_more' | trans }}</span>
                        <span class="text-read-less hidden">{{ 'app.ui.read_less' | trans }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;div class="show-hide" data-height="105" data-height-md="125" data-height-lg="90">
    &lt;div class="show-hide-body">
        ...
    &lt;/div>
    &lt;div class="show-hide-footer">
        &lt;div class="show-hide-footer-container">
            &lt;a href="#" class="show-hide-footer-link">
                &lt;span class="text-read-more">
                    {&#123; 'app.ui.read_more' | trans &#125;}
                &lt;/span>
                &lt;span class="text-read-less hidden">
                    {&#123; 'app.ui.read_less' | trans &#125;}
                &lt;/span>
            &lt;/a>
        &lt;/div>
    &lt;/div>
&lt;/div></code>
    </pre>
</section>
