How to create Expanding Cards using HTML, CSS and Javascript ?
Last Updated :
30 Jan, 2024
Creating expanding cards using HTML, CSS, and JavaScript involves creating a set of cards that expand when clicked.
Approach
- Selection of Sections:
- The code starts by selecting all HTML elements with the class ‘section’ using the
document.querySelectorAll('.section')
method.
- This creates a NodeList containing all elements with the specified class.
- Event Listener for Each Section:
- A
forEach
loop is used to iterate over each section in the NodeList (sections
).
- For each section, an event listener for the ‘click’ event is added.
- Removing ‘active’ Class from Other Sections:
- Inside the click event handler, another
forEach
loop is used to iterate over all sections (sections
).
- For each section in this loop, the ‘active’ class is removed using
section.classList.remove('active')
.
- Adding ‘active’ Class to Clicked Section:
- After removing the ‘active’ class from all sections, the ‘active’ class is added to the currently clicked section using
section.classList.add('active')
.
Example: We are following the above-explained approach.
Javascript
const sections = document.querySelectorAll( '.section' )
sections.forEach((section)=>{
section.addEventListener( 'click' ,()=>{
sections.forEach((section) => {
section.classList.remove( 'active' )
})
section.classList.add( 'active' )
})
})
|
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" />
< title >Expanding Cards</ title >
</ head >
< body >
< div class = "container" >
< div class = "section one active" ></ div >
< div class = "section two" ></ div >
< div class = "section three" ></ div >
< div class = "section four" ></ div >
</ div >
</ body >
</ html >
|
CSS
.container{
display : flex;
width : 80% ;
}
.one{
background : url (img/one.jpg);
}
.two{
background : url (img/two.jpg);
}
.three{
background : url (img/three.jpg);
}
.four{
background : url (img/four.jpg);
}
.section{
background- size : cover;
background-position : center ;
background-repeat : no-repeat ;
height : 80 vh;
cursor : pointer ;
flex: 0.2 ;
margin : 8px ;
position : relative ;
transition: all 0.7 s ease-out;
}
.section.active{
flex: 3 ;
}
|
Output: Click here to see live code output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...