Dynamic HTML Tabs from JSON Data

Just a quick write playing around on HTML, JSON, jQuery with SCSS for loading JSON Data into HTML Tabs.

Photo by Artem Sapegin on Unsplash

I have a blank unordered list with no list item and a blank container for the contents that I want to insert from JSON data.

HTML

<!-- tabs ul li -->
<ul class="tabs">
</ul>
<!-- tabs content -->
<div class="container">
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');
body {
 font-family:'Open Sans', 'Arial', 
      'Verdana';
   padding:6rem 6rem;
}
.tabs {
   border-bottom:1px solid #ccc;
   li {
      display: inline-block;
      padding:5px 8px 8px 8px;
      border-top:solid 1px #ccc;
      border-left:solid 1px #ccc;
      border-right:solid 1px #ccc;
      border-top-left-radius:8px;
      border-top-right-radius:8px;
      margin-right:1rem;
      transition: background-color .5s ease;
      &.active, &:hover {
         background-color: #f2f2f2;         
      }
   }
   a {
      padding:.5rem .75rem .2rem .75rem; 
      text-decoration: none;
      display: block;      
      font-weight:bold;
      &.active {
         display: block;
         color:#555;
      }
   }    
}
.container {
   margin-bottom:2rem;
}
.container div {
   display: none;
   transform: translateX(-20px);
   transition: transform .5s ease;
}
.container div.active {
   display: block;
   transform: translateX(0);
}

jQuery

// Json Data Tab
var data =[
   {
     "Label":"Tab 1",
     "Content":"This is content for Tab 1",
   },
   {
     "Label":"Tab 2",
     "Content":"This is content for Tab 2",
   },
   {
     "Label":"Tab 3",
     "Content":"This is content for Tab 3",
   }
];
$(document).ready(function() {
   // Define variables
   var tabs = $('.tabs');
   var container = $('.container');
   var html_tabs = '';
   var html_content = '';
   // Looping data
   $.each(data,function(index, data){
      html_tabs +='<li><a href="#tab'+index+'">'+data.Label+'</a></li>';
      html_content +='<div id="tab'+index+'"><p>'+data.Content+'</p></div>';
   });
   // Set tabs and content html
   tabs.html(html_tabs);
   container.html(html_content);
   // Looping links
   $.each($('.tabs li a'),function(count, item) {
      // Set on click handler
      $(this).on('click',function() {
         // Hide all div content
         container.find('div').removeClass('active');
         var current = $(this).attr('href');
         // Remove active class on links
         $('.tabs li a').removeClass('active');
         // Set active class on current and ul parent
         $(this).addClass('active');
         $(this).parents('ul').find('li').removeClass('active');
         $(this).parent().addClass('active');
         // Show current container
         $(current).addClass('active');
      });  
   }).eq(1).click().addClass('active');    
});

Result

Screenshot on the result

Codepen result on Dynamic HTML Tabs from JSON Data

If you run the script, the code will load the available json data and displayed it in <ul class="tabs"></ul> and insert the content into <li> tag.

There are several ways you can do with jQuery for data manipulation and this is just one way of make use of jQuery to consuming dynamic data.

Thank you for reading. This was part of my journey on attempt to share my experiences that I encountered in my daily jobs.

References:
https://api.jquery.com/
https://sass-lang.com/