Best way to change the content of 2 divs at once using jquery roundabout?

Question

Hi all,

I'm using jQuery roundabout to build an animated logo on my site - I want content to change when I click on each item, something like this:

http://fredhq.com/projects/roundabout/demo/images/

I have already implemented the JS on that page, which is working fine, but I was wondering what would be the best way to also make another div change at the side? The problem I have is that the script uses string values in an array, whereas I probably want to create the different hidden divs, and show/hide depending on the element clicked.

Simple example:

<img id="blue" src="triangle_blue.png">
<img id="aqua" src="triangle_aqua.png">

<span id="item-title"></span>

<div id="bluepanel">
  Content here
</div>
<div id="aquapanel">
  Content here
</div>

Here is the JS:

$(document).ready(function(){

 var titles = {
  blue: 'Superior Service',
  aqua: 'Bill Checking & Validation'
 };

 $('img').focus(function()
 {
  var useText = (typeof titles[$(this).attr('id')] != 'undefined') ? titles[$(this).attr('id')] : '';
  $('#item-title').html(useText).fadeIn(200);
  }).blur(function() {
  $('#item-title').fadeOut(100);
 });

So you can see atm the script changed the content of item-title based on the key of the titles array, what I would also like to do is show aquapanel when aqua is in focus, and obviously hide all of the other elements (there are more than 1 in the real example.)

My javascript knowledge only really takes me as far as:

$('#aqua').focus(function(){
 $('#bluepanel').hide();
 $('#aquapanel').show();  
});

And i realise this is incredibly inelegant, and inefficient, considering there are 8 or elements in the list. So is there a way create an array of the div ids, and show the one selected, while hiding all others in that array?

I hope I made this clear, and any help is very much appreciated.

Answer 1

For each panel div:

• Add a common class, e.g. "panel"
• Ensure the id is a combination of the image id and "panel", e.g. "bluepanel" for image id="blue"

then in the focus event handler (after the fadeIn()) add something like:

$('div.panel').hide();
$('#' + $(this).attr('id') + 'panel').show();