dfogge dfogge - 1 month ago 4x
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


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


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() {

function toggleDetail2() {


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

thanks in advance for any help on this


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

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