<style>

 

        .texto {

            display: none;

        }

        a {

            color: #007BFF;

            text-decoration: none;

            cursor: pointer;

            margin-left: 5px; /* Espacio entre el texto y el enlace */

        }

        a:hover {

            text-decoration: underline;

        }

    </style>

 


    <p id="textoBase">

        Este es un texto que se mostrará inicialmente. Si deseas leer más sobre el tema, puedes hacer clic en el enlace.

        <a id="enlaceLeerMas" onclick="toggleTexto()">+ info</a>

    </p>

    

    <p id="textoExtra" class="texto">

        Este es el texto adicional que se muestra cuando el usuario hace clic en "Leer más". Aquí puedes incluir detalles adicionales, información relevante, o cualquier contenido que desees que el usuario vea.

        <a id="enlaceLeerMenos" onclick="toggleTexto()" style="display:none;">- info</a>

    </p>


    <script>

        function toggleTexto() {

            const textoExtra = document.getElementById("textoExtra");

            const enlaceLeerMas = document.getElementById("enlaceLeerMas");

            const enlaceLeerMenos = document.getElementById("enlaceLeerMenos");


            if (textoExtra.classList.contains("texto")) {

                textoExtra.classList.remove("texto");

                enlaceLeerMas.style.display = "none";  // Oculta el + info

                enlaceLeerMenos.style.display = "inline";  // Muestra el - info

            } else {

                textoExtra.classList.add("texto");

                enlaceLeerMas.style.display = "inline";  // Muestra el + info

                enlaceLeerMenos.style.display = "none";  // Oculta el - info

            }

        }

    </script>