Jquery Slidetoggle ouvrir 1 div et fermer un autre

Question

J'essaie de fermer un div en cliquant sur un autre div. Actuellement, il ouvre plusieurs divs en même temps.

JQUERY:

$(document).ready(function() { 

    $(".dropdown dt a").click(function() { 
     var dropID = $(this).closest("dl").attr("id"); 
     $("#"+dropID+" dd ul").slideToggle(200); 
     return false; 
    }); 

    $(".dropdown dd ul li a").click(function() { 
     var dropID = $(this).closest("dl").attr("id"); 
     var text = $(this).html(); 
     var selVal = $(this).find(".dropdown_value").html(); 
     $("#"+dropID+" dt a").html(text); 
     $("#"+dropID+" dd ul").hide(); 
     return false; 
    }); 

    $("dl[class!=dropdown]").click(function() { 
     $(".dropdown dd ul").hide(); 
     return false; 
    }); 


    $("id!=quotetoolContainer").click(function() { 
     $(".dropdown dd ul").hide(); 
     return false; 
    }); 

    $('body').click(function() { 
     $(".dropdown dd ul").hide(); 
     return false; 
    }); 

    $('.productSelection').children().hover(function() { 
     $(this).siblings().stop().fadeTo(200,0.5); 
    }, function() { 
     $(this).siblings().stop().fadeTo(200,1); 
    }); 

}); 

HTML:

<div id="quotetoolContainer"> 
    <div class="top"></div> 
    <div id="quotetool"> 
    <h2>Instant Price Calculator</h2> 
    <p>Document Type</p> 
    <dl id="docType" class="dropdown"> 
     <dt><a href="#"><span>Select a Document Type</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#" id="1">Datasheets<span class="value">Datasheets</span></a></li> 
      <li><a href="#">Manuals<span class="value">Manuals</span></a></li> 
      <li><a href="#">Brochures<span class="value">Brochures</span></a></li> 
      <li><a href="#">Newsletters<span class="value">Newsletters</span></a></li> 
      <li><a href="#">Booklets<span class="value">Booklets</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <p>Flat Size</p> 
    <dl id="flatSize" class="dropdown"> 
     <dt><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#">8.5" x 11"<span class="value">8.5" x 11"</span></a></li> 
      <li><a href="#">11" x 17"<span class="value">11" x 17"</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <p>Full Color or Black &amp; White?</p> 
    <dl id="color" class="dropdown"> 
     <dt><a href="#">Full Color<span class="value">Full Color</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#">Full Color<span class="value">Full Color</span></a></li> 
      <li><a href="#">Black &amp; White<span class="value">Black &amp; White</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <p>Paper</p> 
    <dl id="paper" class="dropdown"> 
     <dt><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#">Value White Paper (20 lb.)<span class="value">Value White Paper (20 lb.)</span></a></li> 
      <li><a href="#">Premium White Paper (28 lb.)<span class="value">Premium White Paper (28 lb.)</span></a></li> 
      <li><a href="#">Glossy White Text (80 lb.) - Recycled<span class="value">Glossy White Text (80 lb.) - Recycled</span></a></li> 
      <li><a href="#">Glossy White Cover (80 lb.) - Recycled<span class="value">Glossy White Cover (80 lb.) - Recycled</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <p>Folding</p> 
    <dl id="folding" class="dropdown"> 
     <dt><a href="#">Fold in Half<span class="value">Fold in Half</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#">Fold in Half<span class="value">Fold in Half</span></a></li> 
      <li><a href="#">Tri-Fold<span class="value">Tri-Fold</span></a></li> 
      <li><a href="#">Z-Fold<span class="value">Z-Fold</span></a></li> 
      <li><a href="#">Double-Parallel Fold<span class="value">Double-Parallel Fold</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <p>Three-Hole Drill</p> 
    <dl id="drill" class="dropdown"> 
     <dt><a href="#">No<span class="value">No</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#">No<span class="value">No</span></a></li> 
      <li><a href="#">Yes<span class="value">Yes</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <p>Qty</p> 
    <dl id="quantity" class="dropdown"> 
     <dt><a href="#">50<span class="value">50</span></a></dt> 
     <dd> 
     <ul> 
      <li><a href="#">50<span class="value">50</span></a></li> 
      <li><a href="#">100<span class="value">100</span></a></li> 
      <li><a href="#">150<span class="value">150</span></a></li> 
      <li><a href="#">200<span class="value">200</span></a></li> 
      <li><a href="#">250<span class="value">250</span></a></li> 
      <li><a href="#">500<span class="value">500</span></a></li> 
      <li><a href="#">750<span class="value">750</span></a></li> 
      <li><a href="#">1,000<span class="value">1,000</span></a></li> 
      <li><a href="#">1,500<span class="value">1,500</span></a></li> 
      <li><a href="#">2,000<span class="value">2,000</span></a></li> 
      <li><a href="#">2,500<span class="value">2,500</span></a></li> 
      <li><a href="#">3,000<span class="value">3,000</span></a></li> 
      <li><a href="#">3,500<span class="value">3,500</span></a></li> 
      <li><a href="#">4,000<span class="value">4,000</span></a></li> 
      <li><a href="#">4,500<span class="value">4,500</span></a></li> 
      <li><a href="#">5,000<span class="value">5,000</span></a></li> 
      <li><a href="#">5,500<span class="value">5,500</span></a></li> 
      <li><a href="#">6,000<span class="value">6,000</span></a></li> 
      <li><a href="#">6,500<span class="value">6,500</span></a></li> 
      <li><a href="#">7,000<span class="value">7,000</span></a></li> 
      <li><a href="#">7,500<span class="value">7,500</span></a></li> 
      <li><a href="#">8,000<span class="value">8,000</span></a></li> 
      <li><a href="#">8,500<span class="value">8,500</span></a></li> 
      <li><a href="#">9,000<span class="value">9,000</span></a></li> 
      <li><a href="#">9,500<span class="value">9,500</span></a></li> 
      <li><a href="#">10,000<span class="value">10,000</span></a></li> 
      <li><a href="#">12,500<span class="value">12,500</span></a></li> 
      <li><a href="#">15,000<span class="value">15,000</span></a></li> 
      <li><a href="#">17,500<span class="value">17,500</span></a></li> 
      <li><a href="#">20,000<span class="value">20,000</span></a></li> 
     </ul> 
     </dd> 
    </dl> 
    <div id="priceTotal"> 
     <div class="priceText">Your Price:</div> 
     <div class="price">$29.00</div> 
     <div class="clear"></div> 
    </div> 
    <div id="buttonQuoteStart"><a href="#" title="Start Printing">Start Printing</a></div> 
    </div> 
    <div class="bottom"></div> 
</div> 

Answer 1

Trouvé ma solution!

$(".dropdown dt a").click(function() { 
    var dropID = $(this).closest("dl").attr("id"); 

    if ($("#"+dropID+" dd ul.opened").length) { 
    $('ul.opened').slideToggle(200).removeClass('opened'); 
    } else { 
    $('ul.opened').slideToggle(200).removeClass('opened'); 
    $("#"+dropID+" dd ul").slideToggle(200).addClass('opened'); 
    } 
    return false;  
}); 

Answer 2

En utilisant slideToggle sur une collection d'éléments va ouvrir tous les fermés et fermez tous les ouverts. Utiliser une classe pour suivre celle qui est ouverte, et ensuite seulement glisser les ul spécifiques que vous voulez ouvrir et fermer est probablement une meilleure solution. Quelque chose comme ceci:

$(".dropdown dt a").click(function() { 
    $('ul.opened').slideToggle(200).removeClass('opened'); 
    $(this).closest("dl").find("dd ul").slideToggle(200).addClass('opened'); 
    return false; 
}); 

Personnellement, je préfère utiliser slideUp et slideDown plutôt que slideToggle. De cette façon, je sais précisément ce qui se passe.