Show and hide div based on the selection

Question

I want to hide div for all which are not active. but when ever i reload all the tab contents come into one. Below is a screenshot of the the UI where am facing the problem.

Below are the code.

 $('.tab a').on('click', function (e) { e.preventDefault(); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); target = $(this).attr('href'); $('.tab-content > div').not(target).hide(); $(target).fadeIn(600); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form animated fadeInDown "> <ul class="tab-group"> <li class="tab active"><a href="#roles">Roles</a></li> <li class="tab "><a href="#user">User</a></li> <li class="tab "><a href="#portfolio">Portfolio</a></li> <li class="tab "><a href="#programs">Programs</a></li> <li class="tab "><a href="#projects">Projects</a></li> <li class="tab "><a href="#phases">Phases</a></li> <li class="tab "><a href="#tasks">Tasks</a></li> </ul> <div class="tab-content"> <div id="roles" > <h1> Roles coming soon</h1> </div> <div id="user"> <h1>Users added soon</h1> </div> <div id="portfolio"> <h1>Portfolio added soon</h1> </div> <div id="programs"> <h1>Programs added soon</h1> </div> <div id="projects"> <h1>Projects added soon</h1> </div> <div id="phases"> <h1>Phases added soon</h1> </div> <div id="tasks"> <h1>Tasks added soon</h1> </div> </div> </div> 

I tried as much as possible but couldn't get this thing right. A help is much appreciated.

Answer 1

Just apply the given CSS, other than that your code seems working for me.

 //See the first tab visible by default $($('.tab-group > li.active').children('a').attr('href')).show(); $('.tab a').on('click', function (e) { e.preventDefault(); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); target = $(this).attr('href'); $('.tab-content > div').not(target).hide(); $(target).fadeIn(600); }); 

 .tab-content div{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form animated fadeInDown "> <ul class="tab-group"> <li class="tab active"><a href="#roles">Roles</a></li> <li class="tab "><a href="#user">User</a></li> <li class="tab "><a href="#portfolio">Portfolio</a></li> <li class="tab "><a href="#programs">Programs</a></li> <li class="tab "><a href="#projects">Projects</a></li> <li class="tab "><a href="#phases">Phases</a></li> <li class="tab "><a href="#tasks">Tasks</a></li> </ul> <div class="tab-content"> <div id="roles"> <h1> Roles coming soon</h1> </div> <div id="user"> <h1>Users added soon</h1> </div> <div id="portfolio"> <h1>Portfolio added soon</h1> </div> <div id="programs"> <h1>Programs added soon</h1> </div> <div id="projects"> <h1>Projects added soon</h1> </div> <div id="phases"> <h1>Phases added soon</h1> </div> <div id="tasks"> <h1>Tasks added soon</h1> </div> </div> </div>