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开发者_StackOverflow社区 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

---

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>

---

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

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

---

This is how I'd do it:

<photo image="images/02.jpg" data-detail="bookdetail1">

<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>

Then run this for all the photo elements:

$("photo").on("click", function(){
    var $this = $(this),
        detail = $this.data("detail"),
        $detail = $("#"+detail);
    // If you want to toggle the show/hide just use .toggle()
    if ($detail) {
        $detail.toggle();
    }
    // If you want to execute additional when you toggle:
    /*
        if ($detail.is(":visible")) {
            $detail.hide();
            // do more stuff when it's hidden
        } else {
            $detail.show();
            // do more stuff when it's shown
        }
    */
});