javascript - Turning two elements visible/hidden in the same div

Question

I am having a problem turning one element on and the other off in the same div. It seems I create an object that is supposed to do this, and when I click on it, it hides the entire div instead of turning one element on and one off. What else do I need to add to make this work?

CSS

#test1 {
    width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:none;
}

#test2 {
    width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:block;
}

.mydiv {

}

#test {
    width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;
}

#labor{
    float:left; width:38px; height:125px;
}

#odc {
    float:left; width:32px; height:125px;
}

HTML

 <div id="test">
 <div class="mydiv" id="test1">
    <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
    <div id="line3ChartContainer" style="display:normal">
        <asp:Literal ID="Literal9" Visible="true" runat="server"></asp:Literal></div>
 </div>
 <div class="mydiv" id="test2">
    <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
    <div id="popChartContainer"  style="display:normal">
        <asp:Literal ID="Literal3" Visible="true" runat="server"></asp:Literal></div>
 </div>
 </div>

 <img src="../../images/labortab.png" id="labor" onmousedown="document.test1.visibility='false';document.test2.visibility='true';"/>
 <img src="../../images/odctab.png" id="odc" onmousedown="document.test1.visibility='true';document.line3ChartDiv.visibility='false';"/>

Hope this is better looking.

Answer 1

The most common method for accomplishing this

You should be using jQuery and not pure JavaScript. Follow these steps:

1. Create a class called hidden and inside it, add the style value display:none
2. Use toggleClass or addClass/removeClass on the element to change visibility.

Here is the code example of the jQuery:

$(function(){
    $('#labor').click(function(){
        $('div[name=test1]').addClass('hidden');
        $('div[name=test2]').removeClass('hidden');
    });

    $('#odc').click(function(){
        $('div[name=test1]').removeClass('hidden');
        $('div[name=test2]').addClass('hidden');
    });
});

And here is a demonstration (I tried to use most of your code, so there are some missing images):

• JsFiddle Demo

---

How to speed up your JavaScript code

A good practice is to create a class for hiding your elements within a page (for example, 'hidden') and use it for purposes like this throughout the page. Toggling the value of specific CSS styles is less efficient, and it is almost always recommended that you toggle classes instead.

Here is a very enlightening lecture from Google font-end engineer Nicholas Zakas on JavaScript optimization (this opened my eyes on a few things in JScript):

• Speed Up Your JavaScript (YouTube video)

---

How to implement jQuery

In order to use this (and countless other) jQuery methods, you must first install jQuery into your application. Unfortunately for beginners, that can sound little overwhelming.

The secret to installing jQuery . . .

The secret is to realize that installing jQuery doesn't actually involve an installation per se. All that needs to happen for you to be able to use jQuery in your application, is to reference the jQuery code file. Tip: The jQuery code file is easily created by copy/pasting the jQuery code into a text file, and changing its file extension to .js. Then, to reference the jQuery code, just place a reference link in your header. Here is an example of one of my own website headers:

What it all means . . .

Here you will see references to three different JavaScript code files. The first is a file that provides intelli-sense to my Visual Studio developer environment. The second references my jQuery code file (this is the one you'll need, but you have to change the actual address of the file of course). The third is a reference to my jQuery UI code file.

Where to get the code file . . .

The latest jQuery code file can be downloaded from the jQuery home page or referenced using one of Google's coding libraries; they host many of these source code online for easy access. You can find a directory of these hosted code files in Google Hosted Libraries - Developer Guide.

Video tutorial illustrating the steps above . . .

I haven't actually watched it myself, but it has apparently helped a lot of budding web designers grasp this concept:

• jQuery Basics - Implementing jQuery (YouTube video)

What does the ".min" mean?

You may notice that some of these files include .min in their names. All this indicates is that the file has been "minified". This means that the code has been refractored in a way that makes it as small as possible, but mostly unreadable to humans. You'll see this done often with downloaded jQuery files; they'll usually come with one normal version (for your viewing pleasure) and one minified version for more practical use.