Creating a Convertable List View using CSS and JS Tutorial

Submitted by oretnom23 on Saturday, March 4, 2023 - 10:46.

In this tutorial, you can learn how to create a simple Convertable List View using CSS and JavaScript. The main purpose of this tutorial is to provide students and new programmers with a reference for learning to build a useful component of a website or web application. Here, I will be providing simple web application scripts that demonstrate the creation of a convertible list view.

What is Convertable List View?

The Convertable List View is a feature or component of a website that allows the user to choose what kind of you they want for the list. The user can select the view they prefer for listing the list of data or information. There are lots of views that can be implemented for listing data such as the list, grid, details, and more. The most common viewing feature for listing data on a website is the list and combined grid and details view.

How to create a Convertable List View?

The Convertable List View can be achieved easily using some CSS and JavaScript tricks and techniques. Using the CSS or stylesheets we can set the design of the views or how the data be listed on the interface. Then, JavaScript will be used for creating the conversion function of the view such as updating the view when a button or an option is selected. Check out the source code scripts of a simple web application web page below to understand it more.

Sample Web Application

The below scripts are the source code of a simple web application that demonstrates how the Convertable List View be made using JavaScript and CSS. The script contains a single page that contains a static list of blogs on the website with 2 viewing options (List View and Combined Grid and Details View or the Card View).

Interface

The script below is the HTML code that contains the elements of the page layout and contents. The script contains only static content for demo purposes only.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  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>Css and JS - Convert List View to Card View and Vice Versa</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  13. <body>
  14.     <main>
  15.         <section>
  16.             <h1 class="text-center">Css and JS - Convert List View to Card View and Vice Versa</h1>
  17.             <hr style="width: 50px;">
  18.         </section>
  19.         <section>
  20.             <div class="flex-container">
  21.                 <div><large><b>Blog List</b></large></div>
  22.                 <div class="view-option">
  23.                     <a href="#" class="" data-view="list">
  24.                         <span class="material-symbols-outlined">
  25.                             list
  26.                         </span>
  27.                     </a>
  28.                     <a href="#" class="" data-view="cards">
  29.                         <span class="material-symbols-outlined">
  30.                             grid_view
  31.                         </span>
  32.                     </a>
  33.                 </div>
  34.             </div>
  35.         </section>
  36.         <hr>
  37.  
  38.         <section>
  39.             <div class="convertable-list">
  40.                 <div class="convertable-list-item">
  41.                     <div class="convertable-list-item-thumbnail">
  42.                         <img src="img/thumbnail.png" alt="Sample Thumbnail">
  43.                     </div>
  44.                     <div class="convertable-list-item-details">
  45.                         <div class="convertable-list-item-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget posuere nulla. Integer placerat purus et eros imperdiet, vitae cursus enim pulvinar.</div>
  46.                         <div class="convertable-list-item-description">Donec venenatis sem nec mattis ultrices. Donec posuere imperdiet ligula, non facilisis tortor vestibulum lacinia. Morbi lorem enim, laoreet vitae luctus ut, malesuada ac ante.</div>
  47.                     </div>
  48.                 </div>
  49.                 <div class="convertable-list-item">
  50.                     <div class="convertable-list-item-thumbnail">
  51.                         <img src="img/thumbnail.png" alt="Sample Thumbnail">
  52.                     </div>
  53.                     <div class="convertable-list-item-details">
  54.                         <div class="convertable-list-item-title">Sample Blog #2</div>
  55.                         <div class="convertable-list-item-description">Donec lacinia efficitur massa. Maecenas viverra id nisi vitae pharetra. Maecenas vel odio ante. Vestibulum non tempor erat.</div>
  56.                     </div>
  57.                 </div>
  58.                 <div class="convertable-list-item">
  59.                     <div class="convertable-list-item-thumbnail">
  60.                         <img src="img/thumbnail.png" alt="Sample Thumbnail">
  61.                     </div>
  62.                     <div class="convertable-list-item-details">
  63.                         <div class="convertable-list-item-title">Sample Blog #3</div>
  64.                         <div class="convertable-list-item-description">Aliquam in mollis elit. Proin sapien tellus, mollis at sapien eget, faucibus volutpat massa.</div>
  65.                     </div>
  66.                 </div>
  67.                 <div class="convertable-list-item">
  68.                     <div class="convertable-list-item-thumbnail">
  69.                         <img src="img/thumbnail.png" alt="Sample Thumbnail">
  70.                     </div>
  71.                     <div class="convertable-list-item-details">
  72.                         <div class="convertable-list-item-title">Sample Blog #4</div>
  73.                         <div class="convertable-list-item-description">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis et commodo enim.</div>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.         </section>
  78.  
  79.     </main>
  80.     <script src="script.js"></script>
  81. </body>
  82. </html>

Stylesheet

The script below is the CSS or the stylesheet code for the design of the views, page layout, and responsiveness of the layout for smaller screen devices.

  1. @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
  2.  
  3. @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
  4. body *{
  5.     font-family: 'Rubik', sans-serif;
  6. }
  7. /**
  8. Page Design
  9. */
  10. body,
  11. html{
  12.     height: 100%;
  13.     width: 100%;
  14.     margin: 0;
  15.     padding: 0;
  16. }
  17. body{
  18.     background-color: #efefef;
  19. }
  20. main{
  21.     padding: 2em 5em;
  22.     overflow-x: auto;
  23.     width: 720px;
  24.     margin: auto;
  25. }
  26. /*mobile devices*/
  27. @media (max-width:720px) {
  28.     main{
  29.         width: 100%;
  30.     }
  31. }
  32. .text-center{
  33.     text-align: center;
  34. }
  35. .flex-container{
  36.     width: 100%;
  37.     display: flex;
  38.     justify-content: space-between;
  39. }
  40. .view-option>a{
  41.     text-decoration: none;
  42.     font-weight: 500;
  43.     color:#8d8d8d;
  44.     padding: 0 5px;
  45. }
  46. .view-option>a.active{
  47.     color:#3a3a3a;
  48. }
  49. /*
  50. Convertable list Design
  51. */
  52. .convertable-list{
  53.     width: 100%;
  54.     display: flex;
  55. }
  56. .convertable-list>.convertable-list-item{
  57.     background-color: #fff;
  58.     border:1px solid #e0e0e0;
  59. }
  60.  
  61. .convertable-list,
  62. .convertable-list-item,
  63. .convertable-list-item-thumbnail,
  64. .convertable-list-item-thumbnail>img,
  65. .convertable-list-item-details,
  66. .convertable-list-item-title,
  67. .convertable-list-item-description{
  68.     transition: all .3s ease-in-out;
  69. }
  70.  
  71. /* List View */
  72. .convertable-list{
  73.     flex-direction: column;
  74. }
  75. .convertable-list>.convertable-list-item{
  76.     width: calc(100% - 2.5em);
  77.     display: flex;
  78.     align-items: center;
  79.     padding: .5em 1em;
  80. }
  81. .convertable-list>.convertable-list-item .convertable-list-item-thumbnail{
  82.     width:50px;
  83.     height:50px;
  84.     overflow: hidden;
  85.     background-color: #000;
  86. }
  87. .convertable-list>.convertable-list-item .convertable-list-item-thumbnail>img{
  88.     width:100%;
  89.     height:100%;
  90.     object-fit: scale-down;
  91.     object-position: center center;
  92. }
  93. .convertable-list>.convertable-list-item .convertable-list-item-details{
  94.     width: calc(100% - 100px);
  95. }
  96. .convertable-list>.convertable-list-item .convertable-list-item-title{
  97.     width:calc(100%);
  98.     padding: 5px 10px;
  99.     white-space: nowrap;
  100.     overflow: hidden;
  101.     text-overflow: ellipsis;
  102. }
  103. .convertable-list>.convertable-list-item .convertable-list-item-description{
  104.     display: none;
  105. }
  106.  
  107.  
  108. /* Card View */
  109. .convertable-list[data-view="cards"]{
  110.     flex-direction: row;
  111.     flex-wrap:wrap;
  112.     justify-content:space-between ;
  113. }
  114. .convertable-list[data-view="cards"]>.convertable-list-item{
  115.     width: calc(50% - 3em);
  116.     display: flex;
  117.     flex-direction: column;
  118.     margin-bottom: 1em;
  119.     padding: unset;
  120.     box-shadow: 2px 2px 9px #c3c3c3;
  121. }
  122. /*mobile devices*/
  123. @media (max-width:480px) {
  124.     .convertable-list[data-view="cards"]>.convertable-list-item{
  125.         width: calc(100% - 2.5em);
  126.     }
  127. }
  128. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-thumbnail{
  129.     width:100%;
  130.     height:180px;
  131.     overflow: hidden;
  132.     background-color: #000;
  133. }
  134. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-thumbnail>img{
  135.     width:100%;
  136.     height:100%;
  137.     object-fit: cover;
  138.     object-position: center center;
  139. }
  140. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-details{
  141.     width: calc(100%);
  142.     border-top:1px solid #e1e1e1;
  143. }
  144. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-title{
  145.     width:calc(100% - 1em);
  146.     padding: 1em .5em;
  147.     white-space: nowrap;
  148.     overflow: hidden;
  149.     text-overflow: ellipsis;
  150. }
  151. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-title,
  152. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-title *
  153. {
  154.     font-size: 1.2rem;
  155. }
  156. .convertable-list[data-view="cards"]>.convertable-list-item .convertable-list-item-description{
  157.     padding: 1em .5em;
  158.     display: block;
  159.     font-size: small;
  160.     font-weight: 200;
  161.     margin-bottom: .5em;
  162.     color: #444444;
  163. }

JavaScript

Finally, here's the script for the changing view function. It is a JavaScript code that contains the initialization of changing the view of the list on button click and page load.

  1. /** Selecting all convertable list elements */
  2. const convertableListEls = document.querySelectorAll('.convertable-list')
  3. /** Selecting the active list view option/button */
  4. const convertableListOptEls = document.querySelectorAll('.view-option>a')
  5.  
  6. /** Initialize to change view */
  7. const InitConvertView = () => {
  8.     var current_view = document.querySelector('.view-option>a.active').dataset.view || document.querySelectorAll('.view-option>a')[0].dataset.view || 'list'
  9.     convertableListEls.forEach(el => {
  10.         el.dataset.view = current_view
  11.     })
  12. }
  13. convertableListOptEls.forEach(anchor => {
  14.     /** Tigger change view on option/button click */
  15.     anchor.addEventListener('click', function(){
  16.         convertableListOptEls.forEach(ancEl =>{
  17.             if(!!ancEl.classList.contains('active'))
  18.                 ancEl.classList.remove('active');
  19.         })
  20.         anchor.classList.add('active');
  21.         InitConvertView()
  22.     })
  23. })
  24.  
  25. /**
  26.     * On Page Load
  27.     */
  28. var active_view = document.querySelector('.view-option>a.active') || document.querySelectorAll('.view-option>a')[0] || null 
  29. var current_view = active_view.dataset.view || 'list'
  30. if(document.querySelector('.view-option>a.active') === undefined || document.querySelector('.view-option>a.active') === null){
  31.     if(document.querySelectorAll('.view-option>a')[0] !== undefined && document.querySelectorAll('.view-option>a')[0] !== null)
  32.         document.querySelectorAll('.view-option>a')[0].classList.add('active')
  33. }

Snapshots

Here is the snapshot of the view style of the blog list.

List View

Convertable List View using CSS and JS

Grid View

Convertable List View using CSS and JS

DEMO

Here's the overall result of the web application script that I provided above.

Convertable List View using CSS and JS

There you go! I have also provided the source code zip file on this website and it is free to download. Feel free to download it to do some experiments or enhancements to the scripts. The download button is located below this tutorial's content.

That's the end of this tutorial! I hope this Creating a Convertable List View using 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

Add new comment

About text formats
  • 263 views