showing two tables concurrently that are hidden by ckicking on img

is there any solution to clicking one image and showing two tables?

 <script type="text/javascript">
    function setTable(what){
    if(document.getElementById(what).style.display=="none"){
    document.getElementById(what).style.display="block";
    }
    else if(document.getElementById(what).style.display=="block"){
    document.getElementById(what).style.display="none";
    }
    }
    </script>

    <img src="../../images/p1.gif" onclick="setTable('table5');">
    <tabl开发者_C百科e id='table5' border="0" cellpadding="3" width="100%" style="display:none;">
    <tr>
    ......
    </tr>
    </table>
    <table id='table6' border="0" cellpadding="3" width="100%" style="display:none;">
    <tr>
    ......
    </tr>
    </table>

You are not allowed to have multiple objects with the same ID in the same web page. Give the second table a different id and then show both of them separately.

Change the code to this:

<script type="text/javascript">
    function setTable(what){
    if(document.getElementById(what).style.display=="none"){
    document.getElementById(what).style.display="block";
    }
    else if(document.getElementById(what).style.display=="block"){
    document.getElementById(what).style.display="none";
    }
    }
</script>

    <img src="../../images/p1.gif" onclick="setTable('table5'); setTable('table6');">
    <table id='table5' border="0" cellpadding="3" width="100%" style="display:none;">
    <tr>
    ......
    </tr>
    </table>
    <table id='table6' border="0" cellpadding="3" width="100%" style="display:none;">
    <tr>
    ......
    </tr>
    </table>

In the click handler, you call setTable twice - once for each ID. In the second table, you change the ID

Or, you could put both tables in a div and hide/show that div.