Jquery Slidetoggle open 1 div and close another
Posted
by Stephen
on Stack Overflow
See other posts from Stack Overflow
or by Stephen
Published on 2010-01-28T19:48:41Z
Indexed on
2010/04/17
15:23 UTC
Read the original article
Hit count: 1283
I'm trying to close one div when clicking on another div . Currently, it opens multiple divs at one time.
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 & 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 & White<span class="value">Black & 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>
© Stack Overflow or respective owner
