JavaScript JQuery hide/show function

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

Nev · Accepted Answer · 2013-08-03 11:03:52Z

2

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

edited Aug 3, 2013 at 11:03

Nev

1,56621 silver badges20 bronze badges

answered May 25, 2012 at 5:26

IuR

1761 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Norse · Accepted Answer · 2012-05-25 05:18:52Z

1

There's a prebuilt Jquery function for this.

answered May 25, 2012 at 5:18

Norse

5,75716 gold badges53 silver badges86 bronze badges

Comments

Sampson · Accepted Answer · 2012-05-25 06:48:02Z

1

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();

edited May 25, 2012 at 6:48

answered May 25, 2012 at 5:18

Sampson

269k76 gold badges546 silver badges570 bronze badges

3 Comments

Baruch Over a year ago

thanks, but what do i pass in the parameters of toggle? my table is from a class that i made in css called 'hidden', and the display is equal to none over there, now how do i make toggle to toggle it on and off? and sorry if my question sounds stupid.. im pretty new to js..

Sampson Over a year ago

@Baruch jQuery will handle that for you - don't worry about the CSS. Just call $(table).toggle(), where table is the reference to your element.

jatrim Over a year ago

@Baruch in the example provided here you should be passing a reference to the DOM element you wish to show/hide. It could be "raw" or an already selected jQuery object.

Ankur Verma · Accepted Answer · 2012-05-25 05:19:55Z

0

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

$(selector).toggle();

answered May 25, 2012 at 5:19

Ankur Verma

5,93316 gold badges62 silver badges95 bronze badges

Comments

Tats_innit · Accepted Answer · 2012-05-25 05:24:11Z

0

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();

}

answered May 25, 2012 at 5:24

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Comments

jatrim · Accepted Answer · 2012-05-25 06:12:54Z

0

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

answered May 25, 2012 at 6:12

jatrim

7156 silver badges10 bronze badges

Collectives™ on Stack Overflow

JavaScript JQuery hide/show function

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related