jQuery hide / show

I've discovered jQuery last night and it seems very nice! I'm using it to show/hide a div ID, with a click as a trigger to show the div ID that is initially hidden on the page. This works just fine, I was proud of it :-)

However, I have a problem: after the a trigger is clicked, I want it to become hidden. So I tried adding a line to hide the a trigger onclick, but not only doesn't this work, now the initially hidden div is showing when I load the page.

This is what I've initially tried:

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

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

Now somebody suggested that maybe I can't hide the a trigger because it's an inline element (I don't know anything about that). He suggested putting the a trigger inside another div ID itself, which made sense. So after defining another div with the ID called "hideafterclick" which contains the a trigger, this is what开发者_开发问答 the code looks like:

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

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

But with the same sorry result: the initial part (trigger) is not hidden, AND the div that's supposed to be hidden is immediately visible onload, whereas it should be hidden. When I delete the bold lines containing .hide, the procedure works perfectly.

Any suggestions on what I'm doing wrong? Or on how to solve this? Just to be complete: both "parts" (divs) contain code and hyperlinks. Actually the click on the first part (the trigger) launches a new window AND shows the second part, this works fine. It's just that the first part (trigger) must subsequently become invisible...

Who can help me with this?

Should I use something else besides a div, maybe?

Thanks in advance for your wisdom and assistance,

Thomas (belgium)

Dear Shikiryu, Dear DavidYell,

Thanks a LOT for your jsFiddles: I didn't know about jsFiddle, but it's amazing, so complete, so clear and yet so simple!

Sometimes, happiness can be found in a small detail that seems unimportant. Because in the end, all I did was make one small modification...

What I had initially written in the a trigger part containing the href, was this:

<a id="showhidetrigger" href="HYPERLINK"> blabla</a>

And based on your example, I eventually changed the location of the id of the a tag, so it became:

<a href="HYPERLINK" id="showhidetrigger">blabla</a>  

Don't ask me why, I still don't know what's the difference exactly, but now it works like a charm, and that's what counts! Of course the part HYPERLINK is in my case very long, it belongs to a CFOutput with lots of tags and queries, it contains another javascript to open the link in a popup, etc... so maybe that's where it went wrong in the first place.

I'm happy, thanks to your assistance!

Gratefully yours,

Thomas

Hi all, Thanks a lot for your answers so far! About the apostrophes: I've used the generic 'ones' alright, it seems that when copy-pasting it from a mail window, that they changed, but they're alright in the code itself, so the problem isn't there. About the ** asterisks: I had simply put them there to point to the section where it goes wrong. sorry if this has caused confusion, I had understood that ** would make that line bold, my mistake. But anyway, there are no asterisks in the code itself. It's just that as long as I don't add that last line, it works perfectly: onclick the href of the a trigger opens (in a new window, using javascript) and the (initially hidden) target div becomes visible. But as soon as I tried hiding the a trigger, the target div is visible onload, and the a trigger is not hidden onclick. So then I tied to put another div id around the code containing the a trigger, but with the same result.

Dear Davidyell, thanks for your suggestion. I will try to see if it works, and I will let you know. The page I'm working on is quite a complex one, in ColdFusion (I don't know ColdFusion) and both the a trigger, the href with the javascript popup etc... are all inside a CFoutput. I hope I will be able to see "the trees inside the forest" (freely translated from a Flemish proverb :-)

I'll keep you posted!

Kind regards,

Thomas (Belgium)

I would do something similar to this, http://jsfiddle.net/nxPEr/1/

Hope it helps :) Good luck with jQuery! It's fabulous :)

If you ever run into problems like this use up Firefox with Firebug and, if you have any Javascript errors, it will usually point you in the right direction. Try doing this to see what error it shows.

You are also using ‘ instead of ' or " which may affect parsing of the webpage.

You also, curiously, have the last line starting and ending with **. This will probably cause an error.

First, forget what somebody told you. You can hide inline and block components.

Then, you shouldn't use those weird ‘ ’, use ' or "

Here's a demo

$('#triggerDiv').click(function () {
    $(this).hide();
    $('#hiddenDiv').show(200);
});

Use apostrophes instead of quotation marks.