CODEWITHSUNDEEP
jquery
Hamza Darweesh
Hamza Darweesh

Reputation: 45

hide and show jquery function

I create 3 buttons every button when clicked show table with different data 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

function showtabs(x){


    $("#ttt").hide(100);
    $(".showtable"+x).show(100);
}
</script>

<?php
for($x=0;$x<3;$x++){
?>

<button onclick="showtabs(<?php echo $x; ?>)"> <?php echo $x; ?> </button>

<?php

}


?>

<?php for($x=0;$x<3;$x++){ 

?>


<div id="ttt" class="showtable<?php echo $x;?>" <?php if($x>0) echo "hidden"; ?> >
<table  border="1" >

<tr> <td style="border:0"> <img src="<?php echo $y;?>"  width="700"> </td>         </tr>

<tr> <td style="border:0"> <img src="<?php echo $y2; ?>" style="display:none;border:0" width="700" > </td> </tr>

<tr> <td style="border:0"> <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="showimg(<?php echo $x; ?>)" >
<label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>
</div> </td>
</tr>

<tr> <th> </th> <th> New </th> <th> Old </th> </tr>
<tr> 
    <td> Owner </td> 
    <td <?php if($result['owner'] == $result2['owner']){?> style="background-color:green"<?php } else{ ?> style="background-color:red" <?php }?> > <?php echo $result2['owner']; ?>   </td> 
    <td> <?php echo $result['owner']; ?> </td>
</tr>
<tr> <td> Score </td> <td> - </td> <td> <?php echo $x ?></td> </tr>
<tr> <td> OverLap </td> <td> <?php echo $x ?> </td> <td>  <?php echo $x ?> </td> </tr>







</table>
</div>
<?php 

} ?>

i try to clicked every button to hide and show table with his number $x but what happened that when i click the new table appear but the old dosn't hide

Upvotes: 0

Views: 52

Answers (1)

GrafiCode
GrafiCode

Reputation: 3374

you should invert the use of CLASSes and IDs in each div which wraps your 3 tables.

<div id="ttt" class="showtable<?php echo $x;?>">

should be:

<div class="ttt" id="showtable<?php echo $x;?>"

and your script should be:

<script>
    function showtabs(x) {
        $(".ttt").hide();
        $("#showtable"+x).show(100);
    }
</script>

Check out this pen:

http://codepen.io/anon/pen/vNLamv

Upvotes: 1

Related Questions