Jump to content

Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  styleseye : (24 April 2014 - 02:29 PM) Https://www.facebook.com/l.php?u=Https://www.youtube.com/watch?v=Geh4Rs-Boh8&feature=Youtu.be&h=Taqexxpem
@  styleseye : (24 April 2014 - 02:28 PM) Https://www.facebook.com/l.php?u=Https://www.youtube.com/watch?v=Geh4Rs-Boh8&feature=Youtu.be&h=Taqexxpem
@  yordan : (21 April 2014 - 09:11 PM) Hey, Ritesh, Did You Hear Me?
@  yordan : (14 April 2014 - 05:28 PM) By The Way, This Could Be An Interesting Subject For A Topic, What About Posting This Question? Let's See If Other People Have The Same Feeling Concerning Bootlists!
@  yordan : (13 April 2014 - 09:36 AM) Boot Order : Cd, [Usb,] Hard Drive :D
@  yordan : (11 April 2014 - 07:23 PM) I Simply Let The Bios Do That
@  Ritesh : (11 April 2014 - 10:23 AM) Is It Possible To Launch Fedora Live Cd Or Installation Disk From Hard Drive On Windows Platform Using Grub Mbr File.
@  Ritesh : (11 April 2014 - 10:21 AM) No U Are Not.. Btw.. I Have Question For You.
@  yordan : (10 April 2014 - 08:02 AM) You Are Partially Right.
I Was Not.
Nevertheless, I Am Again :)
@  Ritesh : (09 April 2014 - 07:33 PM) :P
@  Ritesh : (09 April 2014 - 07:33 PM) I Think U R Not..
@  yordan : (09 April 2014 - 09:28 AM) I'm The Master Of The Shoutbox!
@  yordan : (05 April 2014 - 10:32 PM) He-He
@  Ritesh : (04 April 2014 - 06:59 PM) Ha Ha Ha ....
@  yordan : (04 April 2014 - 11:15 AM) Welcome Back, Starscream!
@  yordan : (03 April 2014 - 02:31 PM) And I Hope That He Will Come Back Soon :)
@  yordan : (01 April 2014 - 02:53 PM) Nice, Ritesh Came, I'm Not Home Alone Today.
@  Ritesh : (01 April 2014 - 08:51 AM) Oh!!! Poor Dear Yordan..
@  yordan : (31 March 2014 - 10:02 AM) I'm A Poor Lonesome Cow-Boy
@  yordan : (27 March 2014 - 02:22 PM) He Is Unpatient Due To His Patients!

- - - - -

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

13 replies to this topic

#1 dragoneye


    Newbie [ Level 1 ]

  • Members
  • 2 posts

Posted 09 May 2006 - 12:29 AM

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.

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

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

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

Posted Image
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" />


<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

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


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


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.


P.S thank you "twitch" for the TIP

Edited by dragoneye, 09 May 2006 - 07:11 PM.

#2 twitch


    Veteran Nut

  • Members
  • 527 posts
  • Gender:Male
  • Location:UK
  • Interests:Many.

Posted 09 May 2006 - 05:12 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).

#3 Quatrux


    the Q

  • [HOSTED]
  • 1,669 posts
  • Gender:Male
  • Location:Lithuania, Vilnius
  • Interests:PHP, MySQL, Oracle, PL/SQL, HTML, CSS, Javascript, jQuery, C# Computers, Alternative OS, Amiga, MorphOS, Beer, Friends, Linux, KDE..
  • myCENTs:30.76

Posted 09 May 2006 - 08:37 PM

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

#4 demolaynyc


    Premium Member

  • Members
  • 330 posts

Posted 16 February 2007 - 03:56 AM

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

#5 Guest_mastercomputers_*

  • Guests

Posted 17 February 2007 - 04:19 AM

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.



#6 Guest_FeedBacker_*

  • Guests

Posted 09 February 2008 - 02:25 PM

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

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



#7 Guest_iGuest-Gary_*

  • Guests

Posted 15 November 2008 - 09:13 AM

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:

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?


-question by Gary

#8 rossi


    Newbie [ Level 1 ]

  • Members
  • 1 posts

Posted 30 September 2009 - 10:01 PM


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://www.ic-geoss....konomski-tehnik

Thanks in advance for your help.


#9 Nameless_


    Newbie [ Level 1 ]

  • Members
  • 9 posts

Posted 05 October 2009 - 08:43 AM

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.

#10 starscream


    Super Member

  • Members
  • 896 posts
  • Gender:Male
  • Location:Land of Shadows
  • myCENTs:84.35

Posted 05 October 2009 - 09:15 AM

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

#11 Guest_(G)_*

  • Guests

Posted 09 December 2009 - 09:09 AM

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

#12 Guest_(G)zahra_*

  • Guests

Posted 23 December 2009 - 07:29 AM

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


#13 Guest_(G)Jerry_*

  • Guests

Posted 09 February 2010 - 08:04 PM

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;&nbsp";Echo "<input type = 'radio' name='eventtype' value='Volunteer' onclick=showme('Volunteer')>Volunteer Events&nbsp;&nbsp";Echo "<br><br>";Echo " for ";Echo "<input type='radio' name='year' value='" . $lastyear . "' onclick=getYear(this.Value)> " . $lastyear . "&nbsp;&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>&nbsp;</b></div>";Echo "</body>";Echo "</html>";?>

-question by Jerry

#14 Guest_(G)samuel chuks_*

Guest_(G)samuel chuks_*
  • Guests

Posted 07 April 2010 - 01:01 PM

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

Reply to this topic


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users