Forum Moderators: open
I have seen many people showing how to hide 1 or more <div> sections, but I am having a bit of trouble.
I have a page on my site which has a table with 2 columns
In the right hand column I have a header info div which shows the current page in red, and another link in grey
I have a second div for header in grey then red
(on my site red will indicate current location)
I then have 2 sections under this with different text.
I want to:
Click on the grey link in the header
Change the header to the hidden header
Change the text to the hidden text
Then click on the new link
Current header is hidden
Current text is hidden
Original Header is shown
Original Text is shown
I have seen a way on here how to do a simple hide div, but I want someting a bit fancier.
Any ideas?
Basically I have:
<div id="head1">head 1 contents></div>
<div id="head2">head 2 contents</div> (this is hidden)
<div id=content1>
Content
</div>
<div id=content2>
Content
</div>
I want to:
Click on link in head 1 and hide head 1 and content 1, and show head 2 and content 2
in head 2 I want to click on the link and hide head 2 and content 2 and show head 1 and content 1
I am using CSS for the look and feel of the site.
Any ideas?
Thanks, Kevin
Basically you just need a function that will hide one set of elements and display the other set, depending on what is clicked. Here's an example of that:
function show_hide(shw){
if(shw == 1){
document.getElementById('head1').style.display = 'block';
document.getElementById('content1').style.display = 'block';
document.getElementById('head2').style.display = 'none';
document.getElementById('content2').style.display = 'none';
} else {
document.getElementById('head1').style.display = 'none';
document.getElementById('content1').style.display = 'none';
document.getElementById('head2').style.display = 'block';
document.getElementById('content2').style.display = 'block';
}
}
Then, when you attach the event to each link, you just change whether it sends a 1 or a 2 depending on which you want to show or hide.
If you need help attaching the event, just post back and we'll be happy to help. :)
that looks quite clear (ish).
I guess this can either go in the head of the page as a script, or as an external function.
To call it can I simply use a HREF, calling the function.
something like this:
a href="#" onclick="show_hide
then I am lost,
if you could help some more it would be greatly apreciated
:-)
<a href="#" onclick="show_hide(1); return false;">Show #1</a>
<a href="#" onclick="show_hide(2); return false;">Show #2</a>
The "return false;" prevents the "#" from being passed to the address bar.
Ideally, you would attach those events unobtrusively using javascript, but I think that's a fine way to start and learn how it works. :)
I think I understand how it works, but I'ts not actually working.
I have uploaded the page with the code on here:
<snip>
Originally I had the 2 div sections hidden display=false, this looked ok, but when I click nothing happens.
I then removed this, and now everything is displayed.
I really do apreciate your help on this, as I've been tearing my hair out, can you have a look at the page, and source code, as I can't get it working, even on a page on it's own
Kevin
[edited by: eelixduppy at 4:00 pm (utc) on Mar. 27, 2009]
[edit reason] no personal URLs, please [/edit]
display: none;when it's set in an external stylesheet (or in the <head> of the document).
So, just for those elements, set it in the <div> itself:
<div style="display: none;">
Also, note it's "none" not "false." :)
Ideally, you would actually leave both div's visible for users who aren't using javascript (and for screenreaders which can skip over sections which are set to
display: none;. To do that, you leave both div's visible and add an event listener for when the body is done loading to hide one of them:
function addEvent(obj, evt, fn){
if (obj.addEventListener){
obj.addEventListener(evt, fn, false);
return true;
}
if (obj.attachEvent){
obj.attachEvent('on'+evt, fn);
return true;
}
return false;
}
addEvent( window, 'load', show_hide(1) );
I realised I hadn't closed a Div,
thank you so much it works perfectly
Javascript can't override display: none; when it's set in an external stylesheet (or in the <head> of the document).
So, just for those elements, set it in the <div> itself:<div style="display: none;">
Just for the record, so you are aware, that statement is not correct. You CAN aquire an element's current style state even if the styles were originally declared in stylesheets in head or external, whether by class or id, and not declared in the tag. Look in to currentStyle() for IE and getComputedStyle() for others. Google them.
