javascript - Show and hide div based on the selection -

i want hide div not active. when ever reload tab contents come one. below screenshot of the ui facing problem.

below 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 possible couldn't thing right. appreciated.

just apply given css, other code seems working me.

//see first tab visible 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>