Geek Answers Handbook

Show and hide JavaScript elements on click

Please excuse my ignorance, I have no idea what I'm doing, but I'm trying.

I tried to figure this out by doing a search, but it only gave a functional result in jQuery. Since this is such a small section, I think it would be better to just use plain vanilla JavaScript instead of loading the entire jQuery library.

Does anyone know how / if I can perform the same functions below, but only with normal JavaScript ? Basically, what I'm trying to do is when the "butt1" button is clicked, the unordered list of "links" will become hidden, and the div "box1" will be shown:

<html> <head> <title>qwerty</title> <style type="text/css"> .box1 {background: red;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $("#butt1").live("click", show_box1); function show_box1(event) { $("#links").css("display", "none"); $(".box1").css("display", "inline"); } </script> </head> <body> <ul id="links"> <li id="butt1"><a href="#">blah</a></li> <li id="butt2"><a href="#">blah</a></li> <li id="butt3"><a href="#">blah</a></li> </ul> <div class="box1" style="display: none;">You clicked butt1!</div> </body> </html>

Here's a link to the above as a working example: http://jsbin.com/umitef/4/ is the functionality I want to replicate.

My big thanks to anyone who for a moment ... :-)

+7
source share
5 answers

You can use getElementById to select an element using id (equivalent to $("#something") ) and getElementsByClassName to select elements based on the class name (equivalent to $(".something") ), and you can use style to set the display ( equivalent to jQuery .css method):

 var boxes = document.getElementsByClassName("box1"); document.getElementById("butt1").onclick = function() { document.getElementById("links").style.display = "none"; for(var i = 0; i < boxes.length; i++) { boxes[i].style.display = "inline"; } }

Please note, however, that getElementsByClassName not supported in older versions of IE, so jQuery can be useful even for small things - it shortens the code and eliminates all the annoying small browser differences.

In addition, one significant difference between the code above and your jQuery is the use of the .live jQuery method, which controls the DOM and attaches the event to any element matching the selector, whether it is already in the DOM or is added in the future. With the above code, if there is no element with id "butt1" in the DOM yet, when you run the code, you will get a TypeError because getElementById will return null .

+16
source 
 $("#links").css("display", "none");

Can be:

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

Really, loading jQuery makes a lot of sense since you are doing this from a Google CDN. Many sites use this, so there is a good chance that at some point at least some of your users have already downloaded it. Also, jQuery compression is a very small load. So much so that the readability of jQuery style code is worth it.

+4
source

Well, while the easiest way is with jQuery style, you can still replicate this functionality in Javascript.

The key here is the getElementById function to capture a specific element that you want to process, and then just set the element.style.display property to none ' if you want to hide it and ' block ' or ' inline ' if you want to show it (depending on context)

Here is my crack ...

 <head> <title>qwerty</title> <style type="text/css"> #box1 {background: red;} #box2 {background: blue;} #box3 {background: yellow;} </style> <script type="text/javascript"> function toggle_visibility(id) { var ul = document.getElementById('links'); var box = document.getElementById(id); if(ul.style.display == 'none') { ul.style.display = 'block'; box.style.display = 'block'; } else { ul.style.display = 'none'; box.style.display = 'block'; } } </script> </head> <body> <ul id="links"> <li id="butt1"><a href="#" onclick="toggle_visibility('box1');">blah</a></li> <li id="butt2"><a href="#" onclick="toggle_visibility('box2');">blah</a></li> <li id="butt3"><a href="#" onclick="toggle_visibility('box3');">blah</a></li> </ul> <div id="box1" style="display: none;">You clicked butt1!</div> <div id="box2" style="display: none;">You clicked butt2!</div> <div id="box3" style="display: none;">You clicked butt3!</div> </body> </html>
+1
source

The production compressed version of Jquery is only 31 KB. Download it through http://code.google.com/apis/libraries/devguide.html#jquery . You do not need to load the user interface if you do not need it. The amount of code you want to do is not easy in jQuery. Plus, like JamWaffles, if there are other places where you will use Jquery, just download it and use it.

0
source

that means you only have one box

 window.onload = function() { var links = document.getElementById("links"), box1 = document.getElementsByClassName("box1")[0]; links.onclick = function() { links.style.display = "none"; box1.style.display = "inline"; }; };
0
source

More articles:


All Articles