Comments on: Show and Hide a div using jQuery

By: Mac Gyver Yoingco

Mac Gyver Yoingco — Tue, 01 Feb 2011 05:41:14 +0000

will you please help me?..
i want to show a hidden div using jquery..
after showing the hidden div..
i need to hide an input type that value is “save”
then another input type “save1″ will appear thanks..

By: Thomas

Thomas — Wed, 19 Jan 2011 22:38:59 +0000

Sorry Simon,
a part of message seems to have been deleted, it probably contained too many dangerous tags or brackets:-)
I wrote that I’ve put __ div id=”hideafterclick” __ in front of the section containing the tag, between brackets of course, I haven’t defined the div in any other way. And then I put the slash div at the end of that section.
I hope it makes enough sense for you to verify if I dind’t make any mistakes!

Thomas

By: Thomas

Thomas — Wed, 19 Jan 2011 22:34:20 +0000

Simon,
I’ve put in front of (the section containing) the tag, and a at the end. I assume that’s all it takes to make it into a div? I haven’t typed anything else.
Then I tried to put $(‘#hideafterclick’).hide(); can you confirm that the syntax is correct?

So then the code reads:

$(document).ready(function () {
$(‘#showhidetarget’).hide();

$(‘a#showhidetrigger’).click(function () {
$(‘#showhidetarget’).show(200);
$(‘#hideafterclick’).hide();

});
});

It still doesn’t work, i.e. the target is still showing.
So IF you can confirm me that my code is “as good as it gets” and doesn’t contain any syntax errors or missplacements, THEN we can decide that this simply doesn’t work. Would be a real pity, I was so close!

Kind regards,

Thomas

By: Simon Holman

Simon Holman — Wed, 19 Jan 2011 22:11:50 +0000

Thomas

It may be because an a tag is an inline element, not a block element so it can’t hide it. You’d have to check the jQuery documentation.

Perhaps put a div around the show/hide a tag, give it an id and try to hide the div rather than the a tag.

Simon

By: Thomas

Thomas — Wed, 19 Jan 2011 21:31:21 +0000

Dear Simon,
I’ve tried putting your line $(‘a#showhidetrigger’).hide(); on a couple of places, but it doesn’t seem to work. The target is now no longer hidden when the page is loaded. Did I missplace your code?
This is how I’ve tried it, maybe this can help you to help me:

$(document).ready(function () {
$(‘#showhidetarget’).hide();

$(‘a#showhidetrigger’).click(function () {
$(‘#showhidetarget’).show(200);
$(‘a#showhidetrigger’).hide();
});
});

Thanks in advance,

Thomas

By: Thomas

Thomas — Wed, 19 Jan 2011 21:12:07 +0000

Simon,
Wow, what a fast reply, thanks a lot! Like I said, I’m a complete novice, so I’ll give it a try. At first glance, everything looks like Chinese to me. But when looking closer, I think I understand your reply, and actually your suggestion to modify ‘toggle’ into ‘show’ makes sense, and it’s not a problem at all, I prefer it that way. Now all I have to do is figure out WHERE exactly to put your code
I’ll give it a try, and I will let you know in a couple of minutes!
Kind regards,
Thomas

By: Simon Holman

Simon Holman — Wed, 19 Jan 2011 20:51:55 +0000

Thomas

You should be able to use $(‘a#showhidetrigger’).hide(); in the click function but then you’d lose the ability to toggle so you might as well change the $(‘#showhidetarget’).toggle(400); to $(‘#showhidetarget’).show();

Simon

By: Thomas

Thomas — Wed, 19 Jan 2011 20:46:33 +0000

I am completely new to everything webdesign and jsquery, and I still managed to make it work, so thanks a lot, this is great!.
However, I still have a question: I would like to ‘hide’ the initial link as soon as it is clicked.
So in other words, the initially visible text (show/hide in your example) should be hidden when it is clicked. How should I go about this?

Thanks in advance,
Thomas (Belgium)

By: MockY

MockY — Fri, 23 Jul 2010 23:41:51 +0000

Works like a charm. Easy to implement. Thanks.

By: Sumit Thapar

Sumit Thapar — Wed, 07 Jul 2010 10:21:33 +0000

tHANK YOU SIR…..it was really a simple and very nice article .