Content switcher

[Schmoopy]

Hi guys, I'm looking for a way of switching content on click, I know this should be pretty simple but the ones on here are all a bit too much for what I'm looking for, and trying to strip them down to produce what I want isn't working the way I want it to, here is a screenshot of the page I have at the moment:

http://www.bombthehills.com/test/ukmap.png

Where it says "info gallery calendar", I want to be able to dynamically switch the content without leaving the page, I think you know what I mean, should be pretty simple code,

Thanks for any help given,

Jack

[Medyman]

Where is the content coming from? Is it all in the markup (so you're just showing/hiding divs)? Or are you bringing it in from an external source (AJAX)?

Are you up to using jQuery (http://jquery.com/)?

[Schmoopy]

Well, what happens at the moment is there's an image map which shows when centres are clicked on, but then I also want to be able to show / hide content on divs that are already shown / hidden.

I could use jQuery maybe, although I'm not very good at stuff like that, to help understand more I've uploaded a test page to the site:

http://www.bombthehills.com/test/ridingspots-uk.html

The centre that is nearly done is "Ivyleaf", it's in the south west, second from the left. Hope this helps, I mean jQuery is ok if needs be, but I'd really prefer to just use something much simpler, like making a div display:block on click, and everything else hidden.

Anyways, tell me the next step,

Thanks very much,

Jack.

[Medyman]

It doesn't really get simpler than jQuery. You could use regular javascript (http://blog.movalog.com/a/javascript-toggle-visibility/) as well. It'll be more tedious code writing. But, it'll work.

[Schmoopy]

Sweet, i've got it working now using that page you linked to, but I want a way to condense it a bit, at the moment I have this:



<script>
function toggle_visibility(id) {
var content = document.getElementById(id);
if(content.style.display == 'block'){
content.style.display = 'none';
}
else
content.style.display = 'block';
}


function HideThis(id)
{
var content = document.getElementById(id)
content.style.display='none';
}
</script>


And this in the body:



<a href="#" onclick="HideThis('ivyinfo'); HideThis('ivygallery'); HideThis('ivycalendar'); toggle_visibility('ivyinfo'); return false;"

<div id="ivyinfo" style="display:none; padding-left:10px;">Info Here</div>


So what I want to be able to do is change the HideThis() function, so I can hide all of them in one statement, instead of separating them, I was thinking maybe HideThis('ivyinfo','ivygallery','ivycalendar') but it didn't work =/ Do you know how to achieve this?

I also want the colour of the tab I've selected to change colour so you know you're on it.


Jack

Edit: Changed code