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