En este artículo, veremos cómo podemos crear una tarjeta desplegable que muestre una vista ampliada de la tarjeta al hacer clic. Para crear esta tarjeta usaremos HTML, CSS y JavaScript.
Planteamiento: En esta sección, crearemos la estructura de nuestra tarjeta HTML.
- Cree un div con el contenedor de clase .
- Cree otro div dentro de un contenedor con la sección de clase y activo .
- Diseñe el panel div con una imagen de fondo de su elección.
- Haz otros cuatro div con la misma sección de clase.
HTML:
HTML
<!-- Container --> <div class="container"> <!-- Div with section and active --> <div class="section one active"></div> <!-- All another div with section --> <div class="section two"></div> <div class="section three"></div> <div class="section four"></div> </div>
CSS: En esta sección, asignaremos propiedades generales al elemento usando CSS.
CSS
/* Setting container to flex and width to 80% of view port */
.container{
display: flex;
width: 80%;
}
/*Adding background image to each section*/
.one{
background: url(img/one.jpg);
}
.two{
background: url(img/two.jpg);
}
.three{
background: url(img/three.jpg);
}
.four{
background: url(img/four.jpg);
}
/* Background properties and transition effect to section */
.section{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
cursor: pointer;
flex: 0.2;
margin:8px;
position: relative;
transition: all 0.7s ease-out;
}
/* section with active class will grow flex to 3 times */
.section.active{
flex: 3;
}
JavaScript: agregue la funcionalidad de clic a cada tarjeta usando JavaScript. El método querySelectorAll() se usa para devolver una colección de elementos secundarios con la sección de clase. El método addEventListener() se usa para manejar el evento de clic para cada sección de la tarjeta.
Javascript
// Selecting all sections with class of section
const sections = document.querySelectorAll('.section')
// On click event for each section
sections.forEach((section)=>{
section.addEventListener('click',()=>{
// remove active class from all another section
// and add it to the selected section
sections.forEach((section) => {
section.classList.remove('active')
})
section.classList.add('active')
})
})
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
/* Setting container to flex and
width to 80% of view port */
.container {
display: flex;
width: 80%;
}
/*Adding background image to each section*/
.one {
background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png);
}
.two {
background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png);
}
.three {
background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png);
}
.four {
background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210301162100/jquery.png);
}
/* Background properties and
transition effect to section */
.section {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
cursor: pointer;
flex: 0.2;
margin: 8px;
position: relative;
transition: all 0.7s ease-out;
}
/* section with active class will
grow flex to 3 times */
.section.active {
flex: 3;
}
</style>
<title>Expanding Cards</title>
</head>
<body>
<!-- Container -->
<div class="container">
<!-- Div with section and active -->
<div class="section one active"></div>
<!-- All another div with section -->
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div>
</div>
<script>
// selecting all sections with class of section
const sections = document.querySelectorAll(".section");
// Foreach section when clicked
sections.forEach((section) => {
section.addEventListener("click", () => {
// remove active class from all another section and
// add it to the selected section
sections.forEach((section) => {
section.classList.remove("active");
});
section.classList.add("active");
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA