Toggle Between Divs

[Trublu]

Hey!

Okay, so I've put together this very rudamentary code to display certain links when I click on a certain year; I figured out (a way, at least) how to get the contents of the div to show up when I click. I'm stuck, however, at getting the previous contents to go away when I click on the next year. Here's what I'm working with:

<script type="text/javascript">
function displayNews2011()
{
document.getElementById("default").innerHTML= document.getElementById("2011").style.display = '';
}
function displayNews2010()
{
document.getElementById("default").innerHTML= document.getElementById("2010").style.display = '';
}
function displayNews2009()
{
document.getElementById("default").innerHTML= document.getElementById("2009").style.display = '';
}
</script>


<div style="width: 33%; float: left;"><a href="#" onclick="displayNews2011()">2011</a></div>
<div style="width: 33%; float: left;"><a href="#" onclick="displayNews2010()">2010</a></div>
<div style="width: 33%; float: left;"><a href="#" onclick="displayNews2009()">2009</a></div>


<p id="default">Please click on any of the above years to diplay the available editions of the  News.</p>


<p id="2011" style="display: none;">
<a href="newsmay_june11.pdf">May/June 2011</a>
<br /><br />
<a href="newsmarch_april11.pdf">March/April 2011</a>
<br /><br />
<a href="newsjan_feb11.pdf">January/February 2011</a>
<br /><br /></p>

<p id="2010" style="display: none;">
<a href="newsnov_dec10.pdf">November/December 2010</a>
<br /><br />
<a href="newssept_oct10.pdf">September/October 2010</a>
<br /><br />
<a href="newsjuly_aug.pdf">July/August 2010</a>
<br /><br />
<a href="newsmay_june.pdf">May/June 2010</a>
<br /><br />
<a href="newsmarch_april.pdf">March/April 2010</a>
<br /><br />
<a href="newsjan_feb.pdf">January/February 2010</a>
<br /><br /></p>

<p id="2009" style="display: none;">
<a href="newsnov_dec.pdf">November/December 2009</a>
<br /><br />
<a href="newssept_oct.pdf">September/October 2009</a>
<br /><br /></p>


[moneyman18]

It would be easier to do this using one function and passing the year you want displayed to it.

<script type="text/javascript"><!--
var currentYear;
function displayNews(year){
document.getElementById(year).style.display = '';
if(currentYear == undefined)
document.getElementById('default').innerHTML = '';
else
document.getElementById(currentYear).style.display = 'none';
currentYear = year;
}
//--></script>


<div style="width: 33%; float: left;"><a href="#" onclick="displayNews(2011);">2011</a></div>
<div style="width: 33%; float: left;"><a href="#" onclick="displayNews(2010);">2010</a></div>
<div style="width: 33%; float: left;"><a href="#" onclick="displayNews(2009);">2009</a></div>

[Trublu]

Jun 14, 2011 11:58:18 GMT -8 moneyman18 said:

It would be easier to do this using one function and passing the year you want displayed to it.

<script type="text/javascript"><!--
var currentYear;
function displayNews(year){
document.getElementById(year).style.display = '';
if(currentYear == undefined)
document.getElementById('default').innerHTML = '';
else
document.getElementById(currentYear).style.display = 'none';
currentYear = year;
}
//--></script>


<div style="width: 33%; float: left;"><a href="#" onclick="displayNews(2011);">2011</a></div>
<div style="width: 33%; float: left;"><a href="#" onclick="displayNews(2010);">2010</a></div>
<div style="width: 33%; float: left;"><a href="#" onclick="displayNews(2009);">2009</a></div>

Okay, I have 0 idea how that works and how to get it to match up with my divs... can you walk me through it?

[moneyman18]

Sure no problem. I should've done that in the previous post but I was kinda in a rush as I had to go somewhere.

To use the function use:
displayNews('Id to show here');

So if you want to display the id '2011' to show the links to the news for that year you would use:

displayNews('2011');
or
<a href="#" onclick="displayNews('2011');">2011</a>

---

var currentYear;
This variable is used to store the id of the element that is currently being displayed. Since none of them are being displayed right away, according to the code in your first post, we do not have to set the value.
function displayNews(year){
Here we are defining the function 'displayNews' and are going to have it so that we can pass the year (in this case the id of the element) that we want displayed to the function. This way instead of having to have a function for each year it will allow you to only need one.
document.getElementById(year).style.display = '';
When the function is called after clicking on the link, it sets the element with the id that is in the year variable to be displayed.
if(currentYear == undefined)
This checks to see if a previous year is not being display
document.getElementById('default').innerHTML = '';
If none of the years' news are being displayed, remove the contents of the paragraph tag with the id of 'default' otherwise hide the year's news that is currently being display.
document.getElementById(currentYear).style.display = 'none';
Last but not least set the currentYear variable to the year that was passed to the function so that we can hide it if another year's link is clicked.
currentYear = year;

---

If you need me to clarify something let me know as I know I'm not the best explainer.

[Trublu]

Jun 14, 2011 18:31:43 GMT -8 moneyman18 said:

Sure no problem. I should've done that in the previous post but I was kinda in a rush as I had to go somewhere.

To use the function use:
displayNews('Id to show here');

So if you want to display the id '2011' to show the links to the news for that year you would use:

displayNews('2011');
or
<a href="#" onclick="displayNews('2011');">2011</a>

---

var currentYear;
This variable is used to store the id of the element that is currently being displayed. Since none of them are being displayed right away, according to the code in your first post, we do not have to set the value.
function displayNews(year){
Here we are defining the function 'displayNews' and are going to have it so that we can pass the year (in this case the id of the element) that we want displayed to the function. This way instead of having to have a function for each year it will allow you to only need one.
document.getElementById(year).style.display = '';
When the function is called after clicking on the link, it sets the element with the id that is in the year variable to be displayed.
if(currentYear == undefined)
This checks to see if a previous year is not being display
document.getElementById('default').innerHTML = '';
If none of the years' news are being displayed, remove the contents of the paragraph tag with the id of 'default' otherwise hide the year's news that is currently being display.
document.getElementById(currentYear).style.display = 'none';
Last but not least set the currentYear variable to the year that was passed to the function so that we can hide it if another year's link is clicked.
currentYear = year;

---

If you need me to clarify something let me know as I know I'm not the best explainer.

Lovely, thank you so much for walking me through that.