CODEWITHSUNDEEP
javascriptjquery
sathish
sathish

Reputation: 6765

Hide all the id in JavaScript

I need to hide all the tags which has the ID 'media'

E.g.:

`<div id='media'>contents</div>`

`<div id='media'>content</div>`

How to do this using JavaScript?

Upvotes: 2

Views: 7306

Answers (7)

eric.christensen
eric.christensen

Reputation: 3231

You could do it fairly easily with jQuery.

For example, jQuery allows you to select all attributes with same ID, then apply some style or attribute to them in one action.

You could use the following. Then when you call the hide function from anywhere in your script, the media elements will be hidden.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
     language="javascript" type="text/javascript">
</script>
<script>

 var hide = function() {
      $("#media").css("visibility", "hidden");
    }

</script>

Upvotes: 0

Sneakyness
Sneakyness

Reputation: 5403

WOAH slow down there for a second buddy!

ID = IDENTIFIER = UNIQUE

You can only use id's once #id

CLASS = CATEGORY/GROUP = NOT UNIQUE

You can use classes everywhere .class as many times as you'd like.

Don't make classes named .id, that's silly.
Don't make an id named #class, as that is also silly.

document.getElementByClassName("class").style.display = 'none';

That'll do it.

Apparently no it won't, read this SO Question about the problem.

jQuery Implementation

Note: All the below examples assume that .hidden is defined in a css file like so:

.hidden {
    display: none;
}

Hiding Stuff

to hide something by id:

$("#id").addClass("hidden");

to hide something by class:

$(".class").addClass("hidden");

to hide everything inside of something:

$("#specificSomething *").addClass("hidden");

to hide everything of class bacon within the id stomach:

$("#stomach .bacon").addClass("hidden");

Showing Stuff

to show everything that is hidden:

$(".hidden").removeClass("hidden");

to show everything that is hidden inside of something:

$("#specificSomething .hidden").removeClass("hidden);

Don't forget!

You can also use the built in functions, show() and hide(), like so:

$("#specificsomething").hide();

$("#specificsomething").show();

They also have some fancyness built in, like basic animation. Refer to the documentation to use those.

It's best not to mix and match both of these methods, you can easily confuse yourself and waste plenty of time chasing silly mistakes.

Don't limit yourself!

If you're new to or unfamiliar with jQuery, don't forget that you can do things like:

  • Hide anything with a specific color.
  • Check to see if the first letter of a <p> is a vowel, and hide the entire <p>.
  • Hide all the vowels, everywhere, ever.
  • Hide anything that the user clicks on (when elaborately animated, is quite fun).

These are just a few (admittedly silly) examples of the magic jQuery is capable of. There's a whole book full of new and crazy ways to do things. It's called the documentation. Don't be afraid of it because it's large and full of words. Dive in! There are examples for EVERYTHING. Try things just to try them, even if you don't think they'll work (you'll be surprised).

I'll only give you the easiest of the five examples. I'll likely come back to this later and stuff it with more awesomeness.

Hide anything when the user clicks on it:

$("*").click(function () { 
     $(this).slideUp(); 
});

Wisdom Alert!

Remember, just because you aren't doing it right, doesn't mean you're doing it wrong. Sometimes, you aren't even doing it at all.

Cheesy Pun Warning!

Remember, it's always better to stay classy.

Upvotes: 14

Jacob
Jacob

Reputation: 78850

What BranTheMan said is true. You should probably use class instead of id. Then, if you want to use jQuery, you could simply do this:

$('.media').css("display", "none");

Upvotes: 2

ACP
ACP

Reputation: 35268

Hai Try this,

element = document.getElementById("yourcontrol");
if (element.id == "media")
 document.GetElementById(element).style.visibility = "Hidden"

or

document.GetElementById(element).style.display= "none"

Upvotes: 3

danben
danben

Reputation: 83230

First of all, you really want to make your "id" attributes unique. You can use "name" instead.

Then, you can get an array of them using document.getElementsByName('media')

Finally, loop through and call...whatever it is you use to hide elements in JS. Set display to none, I think.

Upvotes: 3

Asaph
Asaph

Reputation: 162771

Normally you would use

document.getElementById('media').style.display = 'none';

if you want the screen real estate freed up. Or

document.getElementById('media').style.visibility = 'hidden';

if you want the whitespace still there.

But this won't work if you have more than one element on the page with id='media'. Consider having unique ids. It's bad practice not to. The way you're using id, people normally use class. If I were you, I would change them to class. But in that case getElementById() would not be suitable to solve your problem.

Upvotes: 3

Sampson
Sampson

Reputation: 268344

document.getElementById("media").style.display = 'none';

As stated in the comments, you really should only use a particular ID value once per page. Use classnames for multiple elements.

Upvotes: 7

Related Questions