2

I am trying to show and hide certain divs within my document.
I have put together code using getElementById and want to apply style.display to each element of array. I am not sure if this is possible.

Currently my code looks like this:

Javascript

<script>
function chart1() {
    var show = new array ["#chartdiv1", "#unit-price"];
    document.getElementByid("graph-container").show.style.display = "inline";
    var hide = new array ["#chartdiv2", "#unit-price-value",
        "#chartdiv3", "#unit-price-value"];
    document.getElementByid("graph-container").hide.style.display = "none";
};
</script>

HTML

<div id="graph-container">
    <!-- Unit Price Dollar -->
    <div id="unit-price" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">VPM Global Select Opportunities Fund - Dollar Unit Price
        <br>Weekly: 2012/02/03 to 2014/10/24</div>
    <div id="chartdiv1" style="width:100%; height:600px;"></div>
    <!-- Unit Price Dollar Target Return -->
    <div id="unit-price-value" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of $1000 Invested at inception relative to Target Return
        <br>Weekly: 2012/02/03 to 2014/10/24</div>
    <div id="chartdiv2" style="width:100%; height:600px;"></div>
    <!-- Unit Price Rand Versus Inflation -->
    <div id="unit-price-rand" style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 14px; color: #666; clear: both; margin-bottom: 20px;">Value of R1000 Invested at inception relative to Inflation Benchmarks
        <br>Weekly: 2012/02/03 to 2014/10/24</div>
    <div id="chartdiv3" style="width:100%; height:600px;"></div>
    <div style="text-align: center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; color: #666; clear: both; margin-top: 20px;">
        <br>* VPM GSO - VPM Global Select Opportunities Fund</div>
    <br>
</div>
<!-- End Graph Container-->

Original Javascript that works in IE11, Safari, Opera, FireFox and Chrome

This is the orignal code I created it worked in all the browsers except IE8-10, maybe someone can guide me on this.

function chart1() {
    document.getElementById("chartdiv1").style.display = "inline";
    document.getElementById("unit-price").style.display = "block";
    document.getElementById("chartdiv2").style.display = "none";
    document.getElementById("unit-price-value").style.display = "none";
    document.getElementById("chartdiv3").style.display = "none";
    document.getElementById("unit-price-rand").style.display = "none";
    };
    </script>

You help is greatly appreciated.

jasonh
  • 329
  • 2
  • 13

4 Answers4

1

You are mixing pure JS and JQuery.

hide() and show() in JQUery

So, for you: $("#graph-container").hide();

style.display = "none"; in pure JS

So, for you: document.getElementByid("graph-container").style.display = "none";

For the difference between hidden and none: What is the difference between visibility:hidden and display:none?

Community
  • 1
  • 1
M. Page
  • 2,694
  • 2
  • 20
  • 35
  • would you be able to guide with some come jQUERY code that would do the same function i am looking for. – jasonh Nov 05 '14 at 08:48
1

I think that what you are trying to do is this:

function chart1() {
    var show = ["chartdiv1", "unit-price"];
    for ( var i = 0; i < show.length; ++i ) 
         document.getElementById(show[i]).style.display = "inline";
    var hide = ["chartdiv2", "unit-price-value","chartdiv3", "unit-price-value"];
    for ( var i = 0; i < hide.length; ++i ) 
         document.getElementById(hide[i]).style.display = "none";
    };

In this way you itearate over the two arrays so that the elements in show are shown and the others are hidden. The problems were:

  • the IDs if you use plain js and not css or jQuery are without the #
  • The correct syntax for array is Array
  • You have to iterate over the elements in order to hide/show each of them
  • You have to remove the hide/show after the getElementById selection, because in that way you are accessing to a property inside that Object
Michael
  • 3,308
  • 5
  • 24
  • 36
  • I have tried this code it does not seem to work, its good code and makes logical sense that if the show array is greater than i its should display or not display. I even tried it with new Array and removed the #'s would there be anyhting else i can try on this code. – jasonh Nov 05 '14 at 09:36
  • I tried on this jsFiddle and it seems to work: http://jsfiddle.net/0w4bc0vo/ You can see just the two divs – Michael Nov 05 '14 at 09:41
  • I added my original code to the question would you be able to tell me whay it does not work in IE 8-10. – jasonh Nov 05 '14 at 10:18
0

Try using this, it should work.

document.getElementById("graph-container").style.visibility="visible"; //Show the container
 var hide = new array ["#chartdiv2", "#unit-price-value","#chartdiv3", "#unit-price-value"];
    document.getElementById("graph-container").style.visibility="hidden"; //Hide the container
Mernayi
  • 237
  • 3
  • 12
0

Try this, using javascript 

  document.getElementById("<your tag id>").style.visibility = "hidden";

And again to show the element, you can use,

  document.getElementById("<your tag id>").style.visibility = "visible";

A small demontration i submitted in Snippet. Check if it helps you.

<html>
<body>

<div id="myP">This is a p element.</div>

<button type="button" onclick="myFunction()">Hide content of div</button>
<button type="button" onclick="myFunction1()">Show content of div</button>

<script>
function myFunction() {
    document.getElementById("myP").style.visibility = "hidden";
}
  function myFunction1() {
    document.getElementById("myP").style.visibility = "visible";
}
</script>

</body>
</html>

Using Jquery, you can use show() and hide() method. JQuery show and hide method

ajitksharma
  • 4,523
  • 2
  • 21
  • 40