Content switcher

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

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?

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.

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.

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:

Code:

---

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

Code:

---

<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