Dropdown

<div x-data="dropdown(true)">

    <div @click="toggle()"

         class="flex justify-between font-semibold py-6 cursor-pointer">

        <span>Nos Services</span>

        <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('minus', 'w-5 text-text') ?>

            </span>

        </span>

    </div>

    <div class="overflow-hidden">

        <ul x-ref="content" class="hidden dropdown-content">

            <li class="py-2"><a href="#">Acheter</a></li>

            <li class="py-2"><a href="#">Vendre</a></li>

            <li class="py-2"><a href="#">Entretenir</a></li>

            <li class="py-2"><a href="#">Nous trouver</a></li>

            <li class="py-2"><a href="#">Qui sommes-nous ?</a></li>

        </ul>

    </div>

</div>

<div class="bg-white p-6" x-data="dropdown(false)">

    <div @click="toggle()"

         class="flex justify-between font-semibold cursor-pointer">

        <span>Nos Services</span>

        <span>

            <span x-show="!open">

                <?= icon('plus', 'w-5 text-text') ?>

            </span>

            <span x-show="open">

                <?= icon('minus', 'w-5 text-text') ?>

            </span>

        </span>

    </div>

    <div class="overflow-hidden">

        <ul x-ref="content" class="hidden dropdown-content">

            <li class="py-2"><a href="#">Acheter</a></li>

            <li class="py-2"><a href="#">Vendre</a></li>

            <li class="py-2"><a href="#">Entretenir</a></li>

            <li class="py-2"><a href="#">Nous trouver</a></li>

            <li class="py-2"><a href="#">Qui sommes-nous ?</a></li>

        </ul>

    </div>

</div>