1. Tutorials
  2. Creating an Expanding Flex Cards using HTML, CSS, and JS Tutorial

Creating an Expanding Flex Cards using HTML, CSS, and JS Tutorial

Submitted by oretnom23 on Friday, February 24, 2023 - 17:05.

In this tutorial, I will show how to create Expanding Flex Cards for websites using HTML, CSS, and JavaScript. The tutorial aims to provide the students and new programmers with a reference for learning to build a creative collapsible content container using HTML, CSS, and JS. Here, I will be providing a simple web application or page script that demonstrates Expanding Flex Cards.

How do the Expanding Flex Cards work?

The Expanding Flex Cards work something like the accordion component or the collapsible content container. The difference of this component is that the content headers are being vertically displayed or shown inline and the content is collapsing leftward/rightward.

Expanding Flex Cards using HTML and CSS

How to Create Expanding Flex Cards?

The Expanding Flex Cards can be easily achieved using HTML elements, CSS properties and pseudo-elements, and a little JavaScript. We can simply create the list of cards and card items using the HTML elements such as the DIV element <div></div>. Then we can create/customize the flex cards the way wanted and add a short JavaScript line of codes to make the collapsing effect or feature functional.

Example

Here's an example web page script that I created to demonstrate the creation of the Expanding Flex Cards and how it works.

HTML

Here's the HTML script of the web page layout and flex card elements. Make sure to change the path of the loaded images with the image paths that are available on your end.

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>HTML, CSS, and JS - Expanding Flex Cards</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link href="https://fonts.googleapis.com/css2?family=Mynerve&display=swap" rel="stylesheet">
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  14.     <section>
  15.         <h1 class="text-center"><b>Creating an Expanding Flex Cards using HTML and CSS</b></h1>
  16.         <hr width="50px">
  17.     <!-- Flex Cards Container -->
  18.         <div class="expanding-flex-cards">
  19.             <div class="expanding-flex-cards-item active">
  20.                 <img src="images/image1.jpg" alt="" class="expanding-flex-cards-item-img">
  21.                 <div class="expanding-flex-cards-item-body">
  22.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  23.                 </div>
  24.                 <div class="expanding-flex-cards-item-footer">
  25.                     <div class="expanding-flex-cards-icon">1</div>
  26.                     <div class="expanding-flex-cards-title">Card Item 1</div>
  27.                 </div>
  28.             </div>
  29.             <div class="expanding-flex-cards-item">
  30.                 <img src="images/image2.jpg" alt="" class="expanding-flex-cards-item-img">
  31.                 <div class="expanding-flex-cards-item-body">
  32.                     <p>Proin congue ullamcorper enim, vel pharetra ante ultrices non.</p>
  33.                 </div>
  34.                 <div class="expanding-flex-cards-item-footer">
  35.                     <div class="expanding-flex-cards-icon">2</div>
  36.                     <div class="expanding-flex-cards-title">Card Item 2</div>
  37.                 </div>
  38.             </div>
  39.             <div class="expanding-flex-cards-item">
  40.                 <img src="images/image3.png" alt="" class="expanding-flex-cards-item-img">
  41.                 <div class="expanding-flex-cards-item-body">
  42.                     <p>Pellentesque aliquet nisl vel tellus pellentesque suscipit.</p>
  43.                 </div>
  44.                 <div class="expanding-flex-cards-item-footer">
  45.                     <div class="expanding-flex-cards-icon">3</div>
  46.                     <div class="expanding-flex-cards-title">Card Item 3</div>
  47.                 </div>
  48.             </div>
  49.             <div class="expanding-flex-cards-item">
  50.                 <img src="images/image4.png" alt="" class="expanding-flex-cards-item-img">
  51.                 <div class="expanding-flex-cards-item-body">
  52.                     <p>Duis pulvinar erat nec euismod tincidunt.</p>
  53.                 </div>
  54.                 <div class="expanding-flex-cards-item-footer">
  55.                     <div class="expanding-flex-cards-icon">4</div>
  56.                     <div class="expanding-flex-cards-title">Card Item 4</div>
  57.                 </div>
  58.             </div>
  59.             <div class="expanding-flex-cards-item">
  60.                 <img src="images/image5.png" alt="" class="expanding-flex-cards-item-img">
  61.                 <div class="expanding-flex-cards-item-body">
  62.                     <p>Nam hendrerit lorem erat. </p>
  63.                 </div>
  64.                 <div class="expanding-flex-cards-item-footer">
  65.                     <div class="expanding-flex-cards-icon">5</div>
  66.                     <div class="expanding-flex-cards-title">Card Item 5</div>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     <!-- End of Flex Cards Container -->
  71.     </section>
  72.     <script src="script.js"></script>
  73. </body>
  74. </html>

CSS

Here's the stylesheet or the CSS script of the web page layout and flex cards container and items. The card items will be listed horizontally as the result of the following script. It also hides some elements or contents of the items for those inactive card items.

style.css

  1. :root{
  2.     --mynerve-font:'Mynerve', cursive;
  3.     --light-color:#f9f9f9;
  4.     --dark-color:#20262E;
  5. }
  6.  
  7. body,
  8. html{
  9.     height: 100%;
  10.     width: 100%;
  11. }
  12. h1{
  13.     font-family: var(--mynerve-font)
  14. }
  15. .text-center{
  16.     text-align: center;
  17. }
  18. html{
  19.     overflow: hidden;
  20. }
  21. body{
  22.     background-color: var(--dark-color);
  23.     color:var(--light-color);
  24.     overflow:auto;
  25.     margin: 0;
  26.     padding: 0;
  27. }
  28. img{
  29.     width: 600px;
  30. }
  31. /*
  32. * Styles
  33. */
  34. .expanding-flex-cards{
  35.     display: flex;
  36.     flex-wrap: nowrap;
  37.     overflow: auto;
  38.     justify-content:center;
  39. }
  40.  
  41. .expanding-flex-cards>.expanding-flex-cards-item{
  42.     height: 50vh;
  43.     width: 23px;
  44.     position: relative;
  45.     background: transparent;
  46.     border-radius:20px;
  47.     overflow: hidden;
  48.     margin-right: 15px;
  49.     margin-top: 50px;
  50.     margin-bottom: 50px;
  51.     padding: 20px 10px;
  52.     box-shadow: 0px 2px 11px #ffffff52;
  53.     transition: all .3s ease;
  54. }
  55. .expanding-flex-cards>.expanding-flex-cards-item.active {
  56.     width: 500px;
  57. }
  58. .expanding-flex-cards>.expanding-flex-cards-item:not(.active) {
  59.     cursor: pointer;
  60. }
  61. .expanding-flex-cards>.expanding-flex-cards-item:hover:not(.active){
  62.     transform: scale(1.05);
  63. }
  64. .expanding-flex-cards>.expanding-flex-cards-item>img{
  65.     position: absolute;
  66.     top: 0;
  67.     left: 0;
  68.     height: 100%;
  69.     width: 100%;
  70.     object-fit: cover;
  71.     object-position: center center;
  72. }
  73. .expanding-flex-cards>.expanding-flex-cards-item>.expanding-flex-cards-item-footer {
  74.     bottom: 20px;
  75.     z-index: 1;
  76.     position: absolute;
  77.     width: 100%;
  78.     display: flex;
  79.     align-items: center;
  80.     transition: all .3s ease;
  81. }
  82. .expanding-flex-cards>.expanding-flex-cards-item:not(.active)>.expanding-flex-cards-item-footer {
  83.     bottom: 12px;
  84.     left: calc(50% - 15px);
  85.     max-height: calc(25%);
  86.     overflow: hidden;
  87. }
  88. .expanding-flex-cards>.expanding-flex-cards-item>.expanding-flex-cards-item-footer>.expanding-flex-cards-icon {
  89.     width: 30px;
  90.     height: 30px;
  91.     display: flex;
  92.     align-items: center;
  93.     justify-content: center;
  94.     background: #fff;
  95.     color: #464444;
  96.     border-radius: 50% 50%;
  97.     font-size: 16px;
  98.     font-weight: bolder;
  99.     box-shadow: 0px 1px 5px #00000021;
  100.     transition: all .3s ease;
  101. }
  102. .expanding-flex-cards>.expanding-flex-cards-item>.expanding-flex-cards-item-footer>.expanding-flex-cards-title {
  103.     padding: 0px 10px;
  104.     text-shadow: 0px 1px 3px #1616168f;
  105.     display: none;
  106.     transition: all .3s ease;
  107. }
  108. .expanding-flex-cards>.expanding-flex-cards-item.active>.expanding-flex-cards-item-footer>.expanding-flex-cards-title {
  109.     display: block;
  110.     padding: 0px 10px;
  111.     text-shadow: 0px 1px 3px #1616168f;
  112. }
  113.  
  114. .expanding-flex-cards>.expanding-flex-cards-item>.expanding-flex-cards-item-body {
  115.     display: none;
  116.     position: absolute;
  117.     left: 0;
  118.     top: 0;
  119.     width: calc(100% - 34px);
  120.     height: calc(75% - 20px);
  121.     padding: 20px 17px;
  122.     overflow: auto;
  123.     align-items: center;
  124.     justify-content: center;
  125. }
  126. .expanding-flex-cards>.expanding-flex-cards-item>.expanding-flex-cards-item-body p {
  127.     text-align: center;
  128.     font-size: 24px;
  129.     width: 100%;
  130.     font-weight: 500;
  131.     font-family: 'Mynerve';
  132.     font-style: italic;
  133.     text-shadow: 0.5px 0.5px 3px #000;
  134. }
  135. .expanding-flex-cards>.expanding-flex-cards-item.active>.expanding-flex-cards-item-body{
  136.     display: flex;
  137.     transform: scale(0);
  138.     animation:expanding-flex-cards-item-body-reveal .8s ease forwards ;
  139. }
  140. @keyframes expanding-flex-cards-item-body-reveal{
  141.     0%{
  142.         transform: scale(0);
  143.         opacity: 0;
  144.     }
  145.     100%{
  146.         transform: scale(1);
  147.         opacity: 1;
  148.     }
  149. }

 

The web page will now look like the following image using the provided CSS script.

Expanding Flex Cards using HTML and CSS

JavaScript

Here's a simple Pure JavaScript code that makes the Expanding or collapsing animation, transitions of item from inactive to an active state, and sets the previous active card item to inactive.

script.js

  1. const ExpandingFlexCard = document.querySelectorAll('.expanding-flex-cards')
  2. ExpandingFlexCard.forEach(efcEl =>{
  3.         efcEl.querySelectorAll('.expanding-flex-cards-item:not(active)').forEach(item => {
  4.             item.addEventListener('click', function(e){
  5.                 e.preventDefault()
  6.                 efcEl.querySelector('.expanding-flex-cards-item.active').classList.remove('active')
  7.                 this.classList.add('active')
  8.             })
  9.         })
  10. })

There you go! The Expanding Flex Cards will be functional using the provided JS script. As the overall result of the web page script I have provided, it will look and work like the following.

Expanding Flex Cards using HTML and CSS

I have also provided the complete web page scripts zip file on this site and it is free to download. Feel free to download it so you can do some experiments for enhancing it and enhancing your programming capabilities for website UI/UX. The download button is located below this tutorial's content.

That's it! I hope this Creating an Expanding Flex Cards using HTML, CSS, and JS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags
HTML
css
js
Javascript
CSS Animation
CSS Tutorial
Horizontal Accordion
Flex Cards
Expanding Flex Cards

Add new comment

About text formats
  • 1105 views