Iwould do something like this
$(document).ready(function(){
// hide price divs
$(".singleOffer").hide();
// toggle
$("a.togglePrice").toggle(function(){
$(this).next().slideDown('slow');
},function(){
$(this).next().slideUp('slow');
});
});
with following html
<a href="#" class="togglePrice">show/hide
prices</a>
<div class="singleOffer">Content</div>
<a href="#" class="togglePrice">show/hide
prices</a>
<div class="singleOffer">Content</div>
<a href="#" class="togglePrice">show/hide
prices</a>
<div class="singleOffer">Content</div>
...
<a href="#" class="togglePrice">show/hide
prices</a>
<div class="singleOffer">Content</div>
Less html and less javascript
-- David Duymelinck
Owca schreef:
It's my first script using jQuery.
$(document).ready(function(){
$("a").filter('.showPrices').toggle(function(){
$("."+this.id).slideDown('slow');
$("."+this.id).addClass("singleOffer");
},function(){
$("."+this.id).slideUp('slow');
});
});
<a href="javascript:;" class="showPrices" id="price_123">show/hide
prices</a>
<a href="javascript:;" class="showPrices" id="price_124">show/hide
prices</a>
....
<a href="javascript:;" class="showPrices" id="price_2354">show/hide
prices</a>
<div class="price_123" style="display: none;">Content</div>
Is there better way to do this? I have a lot of <a href> that show/
hide single div. In normal JS it's quite easy to show hide something
using getElementById. Is there any way to send div ID to jQuery
function? Like in JS:
function x (div_id) { document.getElementByiD(div_id).style.display =
'block'; }
<a href="x(price_123);"></a>