Multiple show/hide images on a single page jQuery
I have some images on a web page that I want to show and hide. The javascript (using jQuery) looks like:
$('#one').click(function(){
$('#main').show();
$('#chef').hide();
$('#guy').hide();
});
$('#two').click(function(){
$('#main').hide();
$('#chef').show();
$('#guy').hide();
return false;
});
$('#three').click(function(){
$('#main').hide();
$('#chef').hide();
$('#guy').show();
return false;
});
if, i click
one (-- 1|2|3 --) it displays
content and image of the first div and click 2 it displays second image and content.
<div id='inner1'>
<?php echo image_tag('arrow_previous1.gif',array('width'=>16,'height'=>16)) ?>
<?php echo label_for('one','1',array('class'=>'index41','id'=>'one')) ?>|
<?php echo label_for('two','2',array('class'=>'index41','id'=>'two')) ?>|
<?php echo label_for('three','3',array('class'=>'index41','id'=>'three')) ?>
<?php echo image_tag('arrow_next1.gif',array('width'=>16,'height'=>16)) ?>
</div>
the <inner1> is repeated in 2 different divs