dfogge dfogge - 2 months ago 7
jQuery Question

JQUERY - ensuring only one div ID of a particular class shows when user clicks its corresponding image and the rest are set to hide

i have 10 images in a flash carousel thats set up to trigger jquery commands through an XML document

ie:

<photo image="images/01.jpg" url="javascript:toggleDetail1()" target="_self">
<photo image="images/02.jpg" url="javascript:toggleDetail2()" target="_self">

etc...


when the user clicks an image i want to ensure that only that particular image's corresponding div is shown and the other 9 are hidden.

i've given all 10 divs the class of "toggleitem" and every div has it's own ID ("detail1", "detail2", etc.) so now i need to write my jquery and im a little lost.

so far ive gotten to the point where when i click on an image in the carousel the div i want to show will show. BUT i dont really know what to do about getting the other divs in the 'toggleitem' class to hide at that point.

<script type="text/javascript">

function toggleDetail1() {
$('#bookdetail1').show();}

function toggleDetail2() {
$('#bookdetail2').show();}

etc...


do i need to use a .not() selector, an if statement or what? im baffled.

thanks in advance for any help on this

Answer

in case this will help any1 in the future karim told me to do this:

function toggleDetail1() {
$('.toggleitem').hide();
$('#bookdetail1').show(); }
Comments