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.
-
The code starts by selecting all HTML elements with the class ‘section’ using the
-
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.
-
A
-
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')
.
-
Inside the click event handler, another
-
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')
.
-
After removing the ‘active’ class from all sections, the ‘active’ class is added to the currently clicked section using
Example: We are following the above-explained approach.
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' )
})
}) |
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 >
<!-- 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 >
</ body >
</ html >
|
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 : 80 vh;
cursor : pointer ;
flex: 0.2 ;
margin : 8px ;
position : relative ;
transition: all 0.7 s ease-out;
} /* section with active class will grow flex to 3 times */ .section.active{ flex: 3 ;
} |
Output: Click here to see live code output