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>


Reply via email to