JavaScript: Hide And Show Any Element With CSS From the simple way to the more advanced way (Javascript CSS)

[dragoneye1405241521 0]

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.

 

This is how it's looks if you use the "block" value for the display attribute.

 

This is how it's looks if you use the "none" value for the display attribute.

 

This is how it's looks if you use the "visible" value for the visibility attribute.

 

This is how it's looks if you use the "hidden" value for the visibility attribute.

 

I prefer to use the "display" atribute.

 

This is how it's looks the source.

 

<img style="display: block;" src="the_source_img_path" width="100" height="100" />

 

or

 

<img style="display: none;" src="the_source_img_path" width="100" height="100" />

 

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

 

<img id="myIMG" style="display: none;" src="the_source_img_path" width="100" height="100" />

 

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

 

<span style="color: blue; text-decoration: underline; cursor: pointer;">Click Me</span>

 

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

 

<span onclick="if(document.getElementById('myIMG').style.display=='none') {document.getElementById('myIMG').style.display='block';} else {document.getElementById('myIMG').style.display='none';}" style="color: blue; text-decoration: underline; cursor: pointer;">
   Click Me
</span>

 

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

 

<script>function changeme(id, action) {	   if (action=="hide") {			document.getElementById(id).style.display = "none";	   } else {			document.getElementById(id).style.display = "block";	   }}</script>

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

 

<span onclick="changeme('myIMG', 'hide');" style="color: blue; text-decoration: underline; cursor: pointer;">Hide the image</span>

 

<span onclick="changeme('myIMG', 'show');" style="color: blue; text-decoration: underline; cursor: pointer;">Show the image</span>

 

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

Edited May 9, 2006 by dragoneye (see edit history)

[twitch 0]

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

[Quatrux 4]

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.

[demolaynyc 0]

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

[iGuest 3]

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

Notice from mastercomputers:

This one here

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

[iGuest 3]

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

[iGuest 3]

multiple elements

JavaScript: Hide And Show Any Element With CSS

 

Your script rocks.

I am trying to set up a single image location block on my webpage where there would be LINK 1, LINK 2, LINK 3 switching the image.

 

For example.

 

Page loads with IMAGE 1.

Under IMAGE 1 are three links:

IMAGE 1, IMAGE 2, IMAGE 3,

 

Clicking Image 2, hides *Whatever* image is shown and replaces that IMAGE 1, with IMAGE 2.

 

I am really close to getting that result in your script but I can't get it.

 

A little help?

 

Thanks!

 

-question by Gary

[rossi 0]

Hi,

I used you tutorial for using javascript for hide and show css elements. Everything works ok in FF, but it's not working in IE. Can someone please check the code or help me to make it working.

Here is the live link... http://forums.xisto.com/no_longer_exists/

Thanks in advance for your help.

Rossi

[Nameless_ 1]

Hey, that's pretty cool...Does anyone know how to make those blogging things where they show two different lists in the same space? It's where there are tabs and you just have to click on a different tab to get to a different list. It's very convenient, and I want to know how to do that.

[mahesh2k 0]

That effect which you want with the tabs is called as drop-down menu. Drop down menu's are easy. If you can customize your theme's javascript if there is any. Again this depends on your theme's platform. How that javascript calls for pages or subpages. You need to work with javascript and php(if blog is written in it) for that drop-down menu effect. Which blog you're using ? I mean you want this drop-down menu option for blog theme of which platform ?(joomla, wordpress, drupal ?).

[iGuest 3]

higlight the image from the image listJavaScript: Hide And Show Any Element With CSS

I need to hightlight the image icon onclick event. I have some images onclicking of which some functionality will perform. I want to highlight only one imge whichever is selected by the user and if user switch the tool (I.E. Click on the other image) the highlighted one shold get unhighlighted and clicked one should be highlightd...I am using Javascript. I have tried but its not working properly... Can you help me?

Thanks in Advance...

[iGuest 3]

Disable IE Information Bar (active x warning)JavaScript: Hide And Show Any Element With CSS

I am a website developer running  windows XP Home (SP2) and have finally gotten tired of the Information Bar giving me an alert everytime I try to view a website (Local Machine) that is using ActiveX controls.

how can I disable activex control when I want to view website?

my website contains javascript codes.

best regards 

-question by zahra

 

[iGuest 3]

JavaScript: Hide And Show Any Element With CSS - my code doesnJavaScript: Hide And Show Any Element With CSS

Here is the code - but it doesn't do anything ... Thanks in advance

Echo "<script>";Echo "function showme(id) {";Echo " if (id=='Training') {";Echo " document.GetElementById('newvolunteeritem').Style.Display = 'none';";Echo " document.GetElementById('newtrainingitem').Style.Display = 'block';";Echo " }";Echo " if (id=='Volunteer') {";Echo " document.GetElementById('newvolunteeritem').Style.Display = 'block';";Echo " document.GetElementById('newtrainingitem').Style.Display = 'none';";Echo " }";Echo "}";Echo "</script>";Echo "</head>";Echo "<html>";Echo "<body>";$thisyear = date('Y');$lastyear = $thisyear - 1;Echo "<form reportform>";Echo $_SESSION['member_name'] . "'s ";Echo "<input type = 'radio' name='eventtype' value='Training' onclick=showme('Training') checked>Training Events &nbsp";Echo "<input type = 'radio' name='eventtype' value='Volunteer' onclick=showme('Volunteer')>Volunteer Events &nbsp";Echo "<br><br>";Echo " for ";Echo "<input type='radio' name='year' value='" . $lastyear . "' onclick=getYear(this.Value)> " . $lastyear . " &nbsp";Echo "<input type='radio' name='year' value='" . $thisyear . "' onclick=getYear(this.Value) checked> " . $thisyear;Echo "<div id='newtrainingitem' style='display: none;'>";Echo "<br><br>";Echo "Select Training Event:<br><br>";Echo "<select id='trainingevent'>";Echo "<option value = '1'>Training Event 1>";Echo "<option value = '2'>Training Event 2>";Echo "</select>";Echo "</div>";Echo "<div_id='newvolunteeritem' style='display:block;'>";Echo "<br><br>";Echo "Select Volunteer Event:<br><br>";Echo "<select id='volunteerevent'>";Echo "<option value = '1'>Volunteer 1";Echo "<option value = '2'>Volunteer 2";Echo "</select>";Echo "<br><br>";Echo "Date of Volunteer Activity: <input type='text' lenght='100'>";Echo "</div>";Echo "</form>";Echo "</br>";Echo "<div id='txtHint'><b> </b></div>";Echo "</body>";Echo "</html>";?>

-question by Jerry

[iGuest 3]

I have challenge with my form, i now dont know if it is PHP, CSS or JavascriptJavaScript: Hide And Show Any Element With CSS

I have a form that writes to the database, everything works perfectly well, but of late, it began to discriminate against records, by that I mean, when I use the form to populate a records it might work, then if I try again with another record it wont.

 At all times however, it will write the records to the database but echoing the records on the website table has been a challenge.

 Normally the inputed data is just suppose to show under the category I placed it, but in some cases it would only create white spaces without the text showing.  I don't know what could be responsible for this.

 I have looked everywhere, someone pls advise

-reply by samuel chuks