Skip to content

Instantly share code, notes, and snippets.

@MoisesTedeschi

MoisesTedeschi/read-more.html

Created July 11, 2022 20:16
Show Gist options
  • Save MoisesTedeschi/57147bf65f486a2bb326aa1476a40f21 to your computer and use it in GitHub Desktop.
Save MoisesTedeschi/57147bf65f486a2bb326aa1476a40f21 to your computer and use it in GitHub Desktop.
Download ZIP
Leia mais ou "read more" usando Javascript puro e acessando várias classes.
Raw
read-more.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulação de DOM</title>
</head>
<style>
.content span {
font-size: 13px;
cursor: pointer;
}
.content p {
overflow: hidden;
height: 0;
transition: 1s;
}
.mostrar {
height: 100px !important;
}
</style>
<body>
<div class="content">
<h2>1 - Título do Conteúdo <span>Ver mais...</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.</p>
</div>
<div class="content">
<h2>2 - Título do Conteúdo <span>Ver mais...</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.</p>
</div>
<div class="content">
<h2>3 - Título do Conteúdo <span>Ver mais...</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Similique quibusdam blanditiis consequuntur suscipit quam veniam
perspiciatis nobis ipsum, nostrum perferendis? Optio maiores est
non doloremque eius omnis nesciunt explicabo praesentium.</p>
</div>
<script>
(() => {
var span = document.querySelectorAll('.content span');
var content = document.querySelectorAll('.content p');
for( let i = 0; i < span.length; i++ ) {
for( let j = i; j < i + 1; j++ ) {
span[i].addEventListener('click', () => {
if (content[j].classList.contains('mostrar')) {
span[i].innerHTML = 'Ver mais...';
content[j].classList.remove('mostrar');
} else {
span[i].innerHTML = 'Ver menos...';
content[j].classList.add('mostrar');
}
});
};
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment