This is a very simplified version of a code I found on a website: Upon clicking the link the visibility of "page-addlink" changes. How can the do it? How come they don't invoke a javascript inside the hyperlink tag but still can change the visibility of the div? By the way, it might not be the visibility but it seems the same effect. This is the URL of the page, you will need to have an account: http://blinklist.com/yourusername
mnaghdi, without a link to a working page (I will not sign up for something just to answer someone's HTML question) we can only guess. Since the anchor has no real href, javascript is likely being used. It is entirely correct to have javascript referenced only in the <head> of the document rather than in the anchor itself. In fact, stuff like <a onclick="function()" href="#">linkie</a> is considered messy like inline CSS styles. You do not need that to make Javascript work with the anchor. Instead, it can refer to the anchor's class. Anchors cannot hold divs. This is illegal. Do not do it.
I'm afraid non seems to be the answer as the div tag is not inside the hyperlink tag. It is literally like this - i removed "..." to erase the confusion - <a href="#" class="addlink-cp">Add Link</a> <div id="page-addlink" class="_modal" style="display:none;"> PHP: As I mentioned the address to the page with the above code is http://blinklist.com/yourusername and you will need to create a user id. By the way, I would have loved to give a working page which does not need creating a user account but believe me if I knew how to build such a page I wouldn't need to ask this question here.
I know, but I'm still not goin' : ) But, whether they use it or not, it's absolutely possible to do it with JS in the head, and use the class they gave the anchor. What they are probably doing is, when the anchor with the class of "addlink-cp" is clicked, then the div with the id of "page-addlink" gets its display changed from "none" to "block". I can link you to a page which uses JS but does not list it in the HTML elements if you would like to see an example of one of those. It is the recommended way but searching the googles, you'll see plenty of bad examples (I know because I've been learning Javascript and when I need to find something I can often only find garbage). http://stommepoes.nl/Homeselling/SHL/zoekertje2-5.html uses Javascript to change an HTML input into a textarea, and adds a span which displays the number of characters you've typed into the textarea. If you don't have JS, you don't get a number display and you just have an HTML input tag instead. I disagree with the div being "display: none" as those without JS will never be able to see the div. Depending on what the anchor is supposed to do, either the div should be visible by default for those without JS (many sites do this, you see a lot more with JS off in your browser), OR if that div should only exist for people who have JS, then the JS should be creating that div.
Here's a tip, learn the RULES of writing HTML before opening your mouth and inserting foot. See, that's invalid markup, anchor is inline-level, div is block level - block level elements cannot go inside inline-level ones. @mnaghdi - what you are asking for is the province of javascript, you are NOT going to find any sort of reliable cross-browser method of doing that with CSS. Which is why I would make the item start out opened, and use the script to close it during loading AND attach the open/close method. That way people with scripting disabled can see the content.