jquery - Toggle between two tabs/tables with div display -

i want switch between 2 tab (lists) in aspx page.

there 2 tabs div tag start style="display: block;" , style="display: none;" respectively.

i want toggle between 2 when user clicks on tab. here code.

<ul class="something" role="tablist">     <li tabindex="0" class="random1" role="tab" aria-selected="true" aria-controls="application-tabs-1" aria-labelledby="ui-id-1"><a tabindex="-1" class="ui-tabs-anchor" id="ui-id-1" role="presentation" href="#application-tabs-1">hello</a></li>     <li tabindex="-1" class="random2" role="tab" aria-selected="false" aria-controls="application-tabs-2" aria-labelledby="ui-id-2"><a tabindex="-1" class="ui-tabs-anchor" id="ui-id-2" role="presentation" href="#application-tabs-2">world</a></li> </ul>  <div class="something-else1" id="application-tabs-1" role="tabpanel" aria-expanded="true" aria-hidden="false" aria-labelledby="ui-id-1" style="display: block;">     <table class="applications">         <thead>             <tr>                 <th>java</th><th>c</th>             </tr>         </thead>     </table> </div>   <div class="something-else2" id="application-tabs-2" role="tabpanel" aria-expanded="false" aria-hidden="true" aria-labelledby="ui-id-2" style="display: none;">     <table class="applications">         <thead>             <tr>                 <th>english</th><th>french</th>             </tr>         </thead>         <tbody>         </tbody>     </table> </div> 

i understand need create jquery switch between tables using ids, , tried different options none of them worked.

option1

<script>    $("#application-tabs-2").show();    $("#application-tabs-2").hide(); </script> 

option 2

<script>    $("#application-tabs-2").css("display", "block");    $("#application-tabs-2").css("display", "none"); </script> 

option 3

<script>    $(document).ready(function displaychange(){      $("application-tabs-1").toggle();      $("application-tabs-2").toggle();    }); </script> 

how can fix this?

you need call function once tab clicked. within function, find tab's href display it, , hide other siblings (notice excluded ul class 'something'):

$(".ui-tabs-anchor").click(function(event) {     $("div#"+this.getattribute('href')).show();     $("div#"+this.getattribute('href')).siblings().not('.something').hide(); });