CSS/Javascript Show-Hide Div with Alternating Header Titles

I've looked through several examples of using css and javascript to show and hide divs, but I'm having trouble getting the image header that is clicked to change along with the div being hidden or revealed.

I am trying to accomplish something like what is used on http://kings.nhl.com/, specificly the Next Game/Last Game module, or the Schedule/Standings/Stats module.

I would like to show and hide the appropriate div element when the header image is clicked, but I would also like this image to change along with the div.

So basically: when the page initially loads, I would like 1On.gif and  2Off.gif to be visible, along with the contents of divNext. Then when I click on 2Off, it should be replaced with 2On.gif, replace 1On.gif with 1Off.gif, and hide divNext, and show divLast. I hope this is not too confusing.

I have been able to accomplish this with static images that do not change, but I would really like to be able to switch these header images to give the illusion that the user is clicking on tabs and the content is changing back and forth.

Thank you in advance for any help/examples.
1Off.gif
1On.gif
2Off.gif
2On.gif
saladinosAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

quincydudeCommented:
suppose your menu is a table row, you can use



<table>
 <tr>
        <td style="background-image: url(1Off.gif); " onmouseover="this.style.backgroundImage='url(1On.gif)'" onmouseout="this.style.backgroundImage='url(1Off.gif)'"> item 1</td>
		<td style="background-image: url(2Off.gif); " onmouseover="this.style.backgroundImage='url(2On.gif)'" onmouseout="this.style.backgroundImage='url(2Off.gif)'"> item 2</td>
 </tr>
 </table>

Open in new window

0
saladinosAuthor Commented:
That's not quite what I'm looking for. The problem with using a table and mouseover, is that it doesn't hide or reveal the underlying content of the div, or in this case item 1 and item 2. Item 1 and Item 2 are always visible, and I would like to be able to switch back and forth when clicking on the appropriate header image and only see one or the other.
0
quincydudeCommented:
So you mean you want to have two divs and only display one at a time on user action?
If yes then you can set one of the div to have the style of
visibility:hidden;
And upon user triggering display, set it back to
visibility:visible;
and set the other one to hidden.

so in total it may look something like
<table>
 <tr>
        <td id="cell1" style="background-image: url(1On.gif); " onclick="this.style.backgroundImage='url(1On.gif)';document.getElementById('cell2').style.backgroundImage='url(2Off.gif)';document.getElementById('divNext').style.visibility='visible';document.getElementById('divLast').style.visibility='hidden';" > item 1</td>
                <td id="cell2" style="background-image: url(2Off.gif); " onclick="this.style.backgroundImage='url(2On.gif)';document.getElementById('cell1').style.backgroundImage='url(1Off.gif)';document.getElementById('divNext').style.visibility='hidden';document.getElementById('divLast').style.visibility='visible';"> item 2</td>
 </tr>
 </table>
 
<div id="divNext" style="visibility:visible;">
...
</div>
 
<div id="divLast" style="visibility:hidden;">
....
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
saladinosAuthor Commented:
That looks just about perfect. Let me play around with it and get the correct data inside the divs that I would like to show, but that looks like it will be the solution. Thank you very much, ive been looking for something like this for a while now.
0
quincydudeCommented:
You are welcome, happy making your own site. :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.