CODEWITHSUNDEEP
javascriptjquery
Baruch
Baruch

Reputation: 1636

JavaScript JQuery hide/show function

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!!

Upvotes: 1

Views: 914

Answers (6)

IuR
IuR

Reputation: 176

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 :)

Upvotes: 2

Sampson
Sampson

Reputation: 268344

If you're passing an element reference in, use that as your selector:

function toggleReport(table){
    $(table).toggle();
}

Note I'm using .toggle(), which will do exactly what you're attempting to do manually. If you wanted to log the new state, you can do so in the callback:

function toggleReport( table ) {
    $( table ).toggle('fast', function(){
        console.log( "Element is visible? " + $(this).is(":visible") );
    });
}

Note, if you're passing in the ID of the element, your selector will need to be modified:

$( "#" + table ).toggle();

Upvotes: 1

jatrim
jatrim

Reputation: 715

The mistake you made in your original function is that you did not actually use the parameter you passed into your function.You selected "#table" which is simply selecting a element on the page with the id "table". It didn't reference your variable at all.

If your intention was to pass an ID into the selector should be written, jQuery("#" + table). If table is instead a reference to a DOM element, you would write jQuery(table) (no quotes and no pound sign).

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

demo http://jsfiddle.net/uW3cN/2/

demo with parameter passed http://jsfiddle.net/uW3cN/3/

Good read API toggle: http://api.jquery.com/toggle/

code

function toggleReport(){
//removed the argument
$('#table_1').toggle();

}

​another sample rest html is in here http://jsfiddle.net/uW3cN/3/

function toggleReport(tableid){
//removed the argument
$('#'+tableid).toggle();

}

​

Upvotes: 0

Ankur Verma
Ankur Verma

Reputation: 5933

You can use toggle function to achieve this....

$(selector).toggle();

Upvotes: 0

Norse
Norse

Reputation: 5757

There's a prebuilt Jquery function for this.

Upvotes: 1

Related Questions