javascript - Keep tab menu li child active when returned back to that parent menu -

i'm building real estate site on wordpress , have been doing light html, css & js on own. i'm complete novice when comes stuff, have been getting by..... until now.

i built tab / sub-tab menu display active listings @ particular property. structure starts 2 parent tab menus "for sale" & "for rent". each of parent menus have sub-tab menus "all", "1br", "2br" & "3br+".

i built parent tabs visual composer in wordpress, not allow me nest tab elements within tab elements, second or sub-tab menu had build scratch tutorial found online using basic javascript. upon initial arrival of page, "for sale" > "all" menus active , showing listings well.

the problem: when navigate view listings "for rent" none of sub-menus active or displaying listings. user has click on 1 of 4 sub-menu options see availability. same happens when go "for sale".

i want, default, sub-menu tab "all" active , showing listings when click "for sale" or "for rent". plus on if remembered sub-menu user on if switching , forth between 2 parent items.

please help!

link: http://www.eastvalleyurban.com/blank-community-template-2

javascript:

<script type="text/javascript">  $(document).ready(function() {      $(".tab_content").hide();     $(".tab_content:first").show();       $("ul.tabs li").click(function() {         $("ul.tabs li").removeclass("active");         $(this).addclass("active");         $(".tab_content").hide();         var activetab = $(this).attr("rel");          $("#"+activetab).fadein();      }); }); </script> 

html:

<ul class="tabs">          <li class="active" rel="tab5">all</li>         <li rel="tab6">1br</li>         <li rel="tab7">2br</li>         <li rel="tab8">3br</li>     </ul>  <div class="tab_container">        <div id="tab5" class="tab_content">           <script charset="utf-8" type="text/javascript" id="idxwidgetsrc-45380" src="http://www.eastvalleyurban.idxbroker.com/idx/customshowcasejs.php?widgetid=45380"></script>       </div><!-- #tab5 -->      <div id="tab6" class="tab_content">          [for rent - 1br content]        </div><!-- #tab6 -->      <div id="tab7" class="tab_content">         [for rent - 2br content]        </div><!-- #tab7 -->      <div id="tab8" class="tab_content">          <script charset="utf-8" type="text/javascript" id="idxwidgetsrc-45381" src="http://www.eastvalleyurban.idxbroker.com/idx/customshowcasejs.php?widgetid=45381"></script>       </div><!-- #tab8 -->    </div> 

where 'rent' or 'sale' tab in html??? assuming have block rent , sale common class 'rentsale'. in javascript can write :

$('.rentsale').on('click',function(e){  $(this).find('ul.tabs li:first-child').trigger('click'); }) 

write inside document.ready @ third line after $(".tab_content:first").show();

if have ids 'rent' , 'sale' in html rent , sale block write

$('#rent,#sale').on('click',function(e){  $(this).find('ul.tabs li:first-child').trigger('click'); }) 

i hope solves problem if have class or id of rent , sale parent tabs.