Question

so lately i have been working on a little bit of js.

so, basically, my problem is that i need to hide whatever is passed in the parameters or show it if it already hidden.

Here is my code:

<script type='text/javascript'>
<!--
function toggleReport(table){
//the table argument is the table's id
alert(table);                    //to check that the name of the table is right
if($('#table').is(':visible')){ //check if visible
    $('#table').hide();     //if so, hide it
    alert('hide');          //send a message that it is now being hidden
}else{                          //if already hidden
alert('show');                  //send a message that it is now being shown
$('#table').show();             //show the table
}

}
//-->
</script>

however, it doesn’t work…. it is sending the alerts, and everything is correct, however, it does not hide or show the table….

but, if i try doing this:

<script type='text/javascript'>
<!--
function toggleReport(){
//removed the argument
alert('table_1');
if($('#table_1').is(':visible')){
    $('#table_1').hide();
    alert('hide');
}else{
alert('show');
$('#table_1').show();
}

}
//-->
</script>

It works! why is it like that? because im going to have many tables on the website and other things that need to be hidden and shown and i dont want to make a new function for each.. :/

Please help me!

THANKS!!

Answer 1

Very Simple use toggle() intead of show()/hide(), toggle() makes element visible if it is hide and hide it if it is visible.

<script type='text/javascript'>;
function toggleReport(element_ID){
$("#"+element_ID).toggle();
}
</script>

If you want to hard code the Element ID than use following script

<script type='text/javascript'>
function toggleReport(){
$("#table_1").toggle();
}
</script>

Cheers, and dont forgot to vote up my answer
🙂