Welcome everyone, this is my first post.

The first thing you need to know is...

CSS has two special attributes, the first one is "display" and the second is "visibility".

The difference between these two goes like this.

"display": has many properties or values, but the ones we need are "none" and "block". "none" is like a hide value, and "block" is like show. If you use the "none" value you will totally hide what ever html tag you have applied this css style. If you use "block" you will see the html tag and it's content. very simple.

"visibility": has many values, but we want to know more about the "hidden" and "visible" values. "hidden" will work in the same way as the "block" value for display, but this will hide tag and it's content, but it will not hide the phisical space of that tag. For example, if you have a couple of text lines, then and image (picture) and then a table with three columns and two rows with icons and text. Now if you apply the visibility css with the hidden value to the image, the image will disappear but the space the image was using will remaing in it's place, in other words, you will end with a big space (hole) between the text and the table. Now if you use the "visible" value your target tag and it's elements will be visible again.

For example of what I'm saying take a look to the following images.









I prefer to use the "display" atribute.

This is how it's looks the source.



or



Now if you want to hide or show this image using a false link or a form button please follow the following instructions.



first create the image html source...



... and place a "none" value for the display atribute and add an id element to the img source, "myIMG" for example.

Now create a false text link...



now lets add an "onclick event" to that span tag



This javscript source will hide or show the image in the moment you click over the false link.

The same thing can be applied to a form button.

If you need to re-use the javascript source you can create a simple function, for example...



You can call the function using the same way as for the previous example.





Just remember to add the function at the begining of your html source inside your head tags.

Well, thats all for now, I will post more advance ways to implement this little trick (tip).

Remember, if you need help on this topic, just send me a PM or post directly in here.

Att.
v.DragonEyE.n09

P.S thank you "twitch" for the TIP

This post has been edited by dragoneye: May 9 2006, 07:11 PM

Note: Use the HTML BBCode to show HTML(XHTML) snippets by using [ html ][ /html ] (without spaces). Use the CODE BBCode to show any other code snippets (other than PHP/HTML) using the same way, but code instead of html.


Interesting article, and very well explained.

Javascript tutorial can be found at the w3schools' website (http://www.w3schools.com).

This is interesting how you can use JS with CSS, I have learned some Javascript lately, even though I don't know where to use practically (I mean I know, but I never needed) and with time I forgot lots of things, but its not a hard language at all - I don't like it, but I need some things it offers to me.. and I always try to find alternatives to it. Nice work on making the this article, when I read it through - I got the idea.

I've always wanted to try this in my future AJAX applications. Nifty trick and very helpful tutorial. Thank you.

This BBCode:

Clicking on the title bar closes the message, clicking back on it, reopens it.



Was developed with a similar method, except it does not rely on IDs, now this is probably not the latest script I created, I still think it is using my very first implementation of this script which evolved into a more accurate and cleaner way, however it still does what it was intended to do.

Unfortunately this BBCode is for administrator/moderators use only, if caught using it could get you in trouble, though it's allowed in the test post forum.

The code for this BBCode the javascript file and method to install it into IPB is also available freely, somewhere, if it can't be found, then I'll try and locate the files on my computer and put the site for it back up.

Cheers,

MC

Show and Hide
JavaScript: Hide And Show Any Element With CSS

Dear,
How to show and on click function a drop down menu, with smooth animation in javascript.

Thanks

-praveen