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

Question

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 1

sorry shouldve included the html:

<div class="toggleitem" id="bookdetail1">
<span class="cover"><img src="images/details/1/cover-1.jpg"</span>
<span class="spread"><img src="images/details/1/spread-1.jpg"</span>
<span class="blurb">text text text text text.</span>
</div>

Answer 2

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

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