javascript - On li click toggle a specific table -

in code have 2 divs 1 div contains 3 table id table1, table2 , table3. other div has 3 li elements class same table id. first li class table1, second li class table2... , on. tables hide. on first li click want toggle first table, on second toggle second table... , on. html code

    <div class="alltemplatename">         <li class="table1">a</li>         <li class="table2">b</li>         <li class="tbale3">c</li>     </div>   <div class="container">    <table id="table1">    <tr>      <td> hello</td>    </tr>   </table> <table id="table2">    <tr>    <td> hello</td>     </tr>    </table>    <table id="table3">     <tr>      <td> hello</td>    </tr>    </table>  </div> 

i using j query code result not working.

    $(document).ready(function() {       $(".alltemplatename li").click(function() {        // target table:        var tartable = $("#" + $(this).html());              // toggle:          tartable.toggle();             $('.table').not(tartable).hide();         });     }); 

you're close, don't want html of li, want class (and suggest changing that, below).

$(function() {     $(".alltemplatename li").click(function() {         var tableselect = "#" + $(this).attr("class");         var tables = $(".container table");         tables.filter(tableselect).toggle();         tables.not(tableselect).hide();     }); }); 

the reason wouldn't use class may want add other classes li elements, break it. instead, i'd use data-* attribute:

<div class="alltemplatename">     <li data-table="#table1">a</li>     <li data-table="#table2">b</li>     <li data-table="#table3">c</li> </div> 

then:

$(function() {     $(".alltemplatename li").click(function() {         var tableselect = $(this).attr("data-table");         var tables = $(".container table");         tables.filter(tableselect).toggle();         tables.not(tableselect).hide();     }); }); 

live example:

$(".container table").hide();  $(function() {    $(".alltemplatename li").click(function() {      var tableselect = $(this).attr("data-table");      var tables = $(".container table");      tables.filter(tableselect).toggle();      tables.not(tableselect).hide();    });  });

<div class="alltemplatename">    <li data-table="#table1">a</li>    <li data-table="#table2">b</li>    <li data-table="#table3">c</li>  </div>    <div class="container">    <table id="table1">      <tr>        <td>table 1</td>      </tr>    </table>    <table id="table2">      <tr>        <td>table 2</td>      </tr>    </table>    <table id="table3">      <tr>        <td>table 3</td>      </tr>    </table>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>