?
Solved

CSS/Javascript Show-Hide Div with Alternating Header Titles

Posted on 2008-11-12
5
Medium Priority
?
569 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:saladinos
  • 3
  • 2
5 Comments
 
LVL 15

Expert Comment

by:quincydude
ID: 22938110
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
 

Author Comment

by:saladinos
ID: 22941854
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
 
LVL 15

Accepted Solution

by:
quincydude earned 2000 total points
ID: 22942143
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
 

Author Comment

by:saladinos
ID: 22942832
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
 
LVL 15

Expert Comment

by:quincydude
ID: 22956667
You are welcome, happy making your own site. :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question