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?

[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 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