JSFiddle - React, Tailwind, and code Playground

by Sanjeevi Rajagopalan

HTML

<ul class="tabs_down_link">
                                                                    <li ><a style="	padding: 7px 14px;font-size: 16px; color: #000; border-bottom:1px solid #FFFFFF;" href="#view_down7">Subject Area-Based Citations</a></li>
                                                                    <li ><a href="#view_down8">Sub-Area Based Citations</a></li>
                                                                </ul>
                                                               
<div class="tabcontents_down_link">
      <div id="view_down7" style="line-height:180%; font-size: 14px;font-weight: bold; color: #808080; ">
                                                                    	<input  type="checkbox" />&nbsp;(SciCI)<br/>
                                                                        <input  type="checkbox" />&nbsp;(SS&HCI)<br/>
                                                                        <input  type="checkbox" />&nbsp; (M&HSCI) <br/>
                                                                        <input  type="checkbox" />&nbsp;(LSciCI)<br/>
  
</div>
                                                                    
<div id="view_down8" style="font-weight: bold;line-height:180%; font-size: 14px; color: #808080;">
                                                                    	<input  type="checkbox" />&nbsp;History Citation Index<br/>
                                                                        <input  type="checkbox"/>&nbsp;Religion Citation Index<br/>
                                                                        <input  type="checkbox" />&nbsp;Biotechnology Citation Index<br/>
                                                                        <input  type="checkbox" />&nbsp;Food Science Citation Index<br/>
                                                                        <input  type="checkbox" />&nbsp;Chemistry Citation Index<br/>
                       ...

CSS

ul.tabs_down_link
{
    padding: 6px 0;
    font-size: 0;
    margin:0;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the tabs as desired*/
}
        
ul.tabs_down_link li
{
    display: inline;
    margin: 0;
    margin-right:4px; /*distance between tabs*/
	
}
        
ul.tabs_down_link li a
{
    font: bold 13px Arial;
    text-decoration: none;
    position: relative;
    padding: 7px 14px;
    border: 1px solid #B7B7B7;
    color: #00c800;
    /*background: #F7F7F7 url(tabbg2.gif) repeat-x 0 0;*/
    border-radius: 3px 3px 0 0;
    outline:none;
	border-left: 1px solid #B7B7B7;
	
}


        
ul.tabs_down_link li a:hover
{
    background:White url(tabbg.gif) repeat-x 0 0;
}
        
ul.tabs_down_link li.selected a, ul.tabs_down_link li.selected a:hover
{
    position: relative;
    top: 0px;
    font-weight:bold;
    background: white url(tabbg.gif) 0 0 repeat-x;
    border-bottom-color: white;
	color: #000000;
	padding: 7px 14px;
	font-size: 16px;
	
}

            
ul.tabs_down_link li.selected a:hover
{
    text-decoration: none;
}

div.tabcontents_down_link{
	border-top: 1px solid #B7B7B7; 
	padding:30px 5px;
	margin: 0;
}

JavaScript

$(document).ready(function () {
$('div[id^=view_down]').hide();
$('#view_down7').show();
$('.tabs_down_link a').click(function () {
   var tab_id = $(this).attr('href');
   var now = $(this).attr('.tabs_down_link a');
   $('div[id^=view_down]').hide();
   $(tab_id).show(); 
});
});