Las funciones Mostrar más y Mostrar menos pueden ser útiles en sitios web con mucho texto, como sitios web de noticias y revistas que contienen muchos artículos en una sola página. Esto puede ayudar al diseñador de la página web a darle al usuario la libertad de leer más o menos texto según sea necesario.
La cantidad de contenido que se muestra se puede cambiar haciendo clic en los botones. En lugar de mostrar un párrafo completo en una página web, inicialmente solo se muestra una parte del texto y se agrega un botón que muestra más texto. El desarrollador puede decidir la cantidad de texto que debe mostrarse antes y después de hacer clic en un botón.
El enfoque anterior se puede implementar mediante el uso de una condición if-else simple que verifica el estado actual del texto y lo muestra u oculta sobre esa base. El siguiente ejemplo ilustra este método:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Initially, hide the extra text that
can be revealed with the button */
#moreText {
/* Display nothing for the element */
display: none;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Show More and Show Less Example</h3>
<p>
GeeksforGeeks was born out of necessity-
a need to provide a convenient and
one-stop educational portal to all the
students of Computer Science.
<span id="points">...</span>
<!-- Define the text that would be
hidden by default and only shown
when clicked on the button -->
<span id="moreText"> This necessity was
as personal to me as it was universal.
This need combined with my passion for
teaching resulted in GeeksforGeeks as
we know today. My message to you, in
our inaugural edition of Geeks Digest,
would be that if you are looking for
a problem to work on, you don’t need
to look very far for it. All you should
do is to look around yourself.
</span>
</p>
<!-- Trigger toggleText() when the
button is clicked -->
<button onclick="toggleText()" id="textButton">
Show More
</button>
<script>
function toggleText() {
// Get all the elements from the page
var points =
document.getElementById("points");
var showMoreText =
document.getElementById("moreText");
var buttonText =
document.getElementById("textButton");
// If the display property of the dots
// to be displayed is already set to
// 'none' (that is hidden) then this
// section of code triggers
if (points.style.display === "none") {
// Hide the text between the span
// elements
showMoreText.style.display = "none";
// Show the dots after the text
points.style.display = "inline";
// Change the text on button to
// 'Show More'
buttonText.innerHTML = "Show More";
}
// If the hidden portion is revealed,
// we will change it back to be hidden
else {
// Show the text between the
// span elements
showMoreText.style.display = "inline";
// Hide the dots after the text
points.style.display = "none";
// Change the text on button
// to 'Show Less'
buttonText.innerHTML = "Show Less";
}
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por deepak710agarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA