Skip to main content
se añadieron 1040 caracteres en el cuerpo
Origen Enlace
EvilFearzZ
  • 1.1k
  • 1
  • 5
  • 11

Quizá estés buscando algoEdité la respuesta debido a que comentaste que no deseas jQuery, entonces prueba así:

const $(btn "button"= )document.click(function() {
        $querySelector( ".parrafo" ).slideToggle( "fast" boton");
            varconst $thistext = $document.querySelector(this".leer-mas");
             const wrapper = $thisdocument.toggleClassquerySelector("open"".wrapper");

            if ($thisbtn.hasClassaddEventListener("open")) {
         "click", e => {
    $thistext.htmlclassList.toggle("Leer Menos""leer-mas_open");
            } else {
                $thistext.htmlclassList.contains("Leer Mas""leer-mas_open");
   ? btn.innerHTML = "Leer Menos" : btn.innerHTML = "Leer }Mas";
    });
    .parrafoleer-mas {
        display:none; block;
        opacity: 0;
        max-height: 0;
        transition: all 0.5s;
    }
p
    .leer-mas_open {
        display: block;
        opacity: 1;
        max-height: 500px;
    }

    .wrapper {
        width: 40rem; /*PUEDES CAMBIAR PARA MODIFICAR EL ANCHO DEL DIV PADRE*/
        color: #000;
        margin: auto;
    }

    .contenedor {
        padding: 0.25rem;
    }

    .titulo {
        font-size: 1.7em;
        margin-bottom: 1rem;
        letter-spacing: 1px;
    }

    p {
        font-size: 0.8rem;
    }

    .boton {
        display: inline-block;
        color: white;
        background-color: grey;
        padding: 0.6rem 10px;1.5rem;
        font-size: 1em;
        position: relative;
        z-index: 1;
        transition: all 0.5s;
        cursor: pointer;
    }
button
    .boton:hover {
margin        background-topcolor:10px; #fff;
        color: grey;
        box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }
<script<div src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
class="wrapper">
    <div class="contenedor">
        <h1 class="titulo"> Hola perros</h1>
        Hola<p perrosid="parrafo">
     </h1>       Lorem ipsum dolor sit amet
     <p class="parrafo">Lorem      <span class="leer-mas">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta rem fugiat numquam at maxime expedita voluptate fugit, culpa soluta, voluptatibus facere quo autem laudantium corporis molestiae? Voluptatem, temporibus pariatur.
     Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Adipisci reprehenderit expedita explicabo libero officia impedit nisi odio. Fuga velit rerum sit nisi corrupti earum temporibus, officia, eveniet voluptas aperiam sint.
     Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Nam delectus, facilis saepe placeat mollitia minima repudiandae dignissimos. Voluptatem doloremque deserunt suscipit, recusandae voluptas quia. At molestias laborum neque quos fugiat!
            </span>
        </p>
     <button class="boton">Leer mas< <p class="boton">Read More</button>p>
    </div>
</div>

Puedes aprender más mirando esta pregunta del sitio

Quizá estés buscando algo así:

 $( "button" ).click(function() {
        $( ".parrafo" ).slideToggle( "fast" );
            var $this = $(this);
                $this.toggleClass("open");

            if ($this.hasClass("open")) {
                $this.html("Leer Menos");
            } else {
                $this.html("Leer Mas");
            }
    });
.parrafo {
display:none;
}
p {
margin:0 0 10px;
}
button {
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="contenedor">
     <h1 class="titulo">
        Hola perros
     </h1>
     <p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta rem fugiat numquam at maxime expedita voluptate fugit, culpa soluta, voluptatibus facere quo autem laudantium corporis molestiae? Voluptatem, temporibus pariatur.
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reprehenderit expedita explicabo libero officia impedit nisi odio. Fuga velit rerum sit nisi corrupti earum temporibus, officia, eveniet voluptas aperiam sint.
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam delectus, facilis saepe placeat mollitia minima repudiandae dignissimos. Voluptatem doloremque deserunt suscipit, recusandae voluptas quia. At molestias laborum neque quos fugiat! </p>
     <button class="boton">Leer mas</button>
 </div>

Puedes aprender más mirando esta pregunta del sitio

Edité la respuesta debido a que comentaste que no deseas jQuery, entonces prueba así:

const btn = document.querySelector(".boton");
const text = document.querySelector(".leer-mas");
const wrapper = document.querySelector(".wrapper");

btn.addEventListener("click", e => {
    text.classList.toggle("leer-mas_open");
    text.classList.contains("leer-mas_open") ? btn.innerHTML = "Leer Menos" : btn.innerHTML = "Leer Mas";
});
    .leer-mas {
        display: block;
        opacity: 0;
        max-height: 0;
        transition: all 0.5s;
    }

    .leer-mas_open {
        display: block;
        opacity: 1;
        max-height: 500px;
    }

    .wrapper {
        width: 40rem; /*PUEDES CAMBIAR PARA MODIFICAR EL ANCHO DEL DIV PADRE*/
        color: #000;
        margin: auto;
    }

    .contenedor {
        padding: 0.25rem;
    }

    .titulo {
        font-size: 1.7em;
        margin-bottom: 1rem;
        letter-spacing: 1px;
    }

    p {
        font-size: 0.8rem;
    }

    .boton {
        display: inline-block;
        color: white;
        background-color: grey;
        padding: 0.6rem 1.5rem;
        font-size: 1em;
        position: relative;
        z-index: 1;
        transition: all 0.5s;
        cursor: pointer;
    }

    .boton:hover {
        background-color: #fff;
        color: grey;
        box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }
<div class="wrapper">
    <div class="contenedor">
        <h1 class="titulo"> Hola perros</h1>
        <p id="parrafo">
            Lorem ipsum dolor sit amet
            <span class="leer-mas">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta rem fugiat numquam at maxime expedita voluptate fugit, culpa soluta, voluptatibus facere quo autem laudantium corporis molestiae? Voluptatem, temporibus pariatur. Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Adipisci reprehenderit expedita explicabo libero officia impedit nisi odio. Fuga velit rerum sit nisi corrupti earum temporibus, officia, eveniet voluptas aperiam sint. Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Nam delectus, facilis saepe placeat mollitia minima repudiandae dignissimos. Voluptatem doloremque deserunt suscipit, recusandae voluptas quia. At molestias laborum neque quos fugiat!
            </span>
        </p>
        <p class="boton">Read More</p>
    </div>
</div>
Origen Enlace
EvilFearzZ
  • 1.1k
  • 1
  • 5
  • 11

Quizá estés buscando algo así:

 $( "button" ).click(function() {
        $( ".parrafo" ).slideToggle( "fast" );
            var $this = $(this);
                $this.toggleClass("open");

            if ($this.hasClass("open")) {
                $this.html("Leer Menos");
            } else {
                $this.html("Leer Mas");
            }
    });
.parrafo {
display:none;
}
p {
margin:0 0 10px;
}
button {
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="contenedor">
     <h1 class="titulo">
        Hola perros
     </h1>
     <p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta rem fugiat numquam at maxime expedita voluptate fugit, culpa soluta, voluptatibus facere quo autem laudantium corporis molestiae? Voluptatem, temporibus pariatur.
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reprehenderit expedita explicabo libero officia impedit nisi odio. Fuga velit rerum sit nisi corrupti earum temporibus, officia, eveniet voluptas aperiam sint.
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam delectus, facilis saepe placeat mollitia minima repudiandae dignissimos. Voluptatem doloremque deserunt suscipit, recusandae voluptas quia. At molestias laborum neque quos fugiat! </p>
     <button class="boton">Leer mas</button>
 </div>

Puedes aprender más mirando esta pregunta del sitio