Question

I have written a small function in JQuery, took me a little while but I got there. You click a link and a dropdown shows. But I need to click the link and show the dropdown, but upon clicking it again I want the same dropdown again, up to a maximum or 4.

Now I’m stuck with this a bit, this is how far I got.

HTML:

<a class="toggle" href="#">Add another Location</a>

insert more locations dropdownbox​

JQuery:

$(function() {
    $("a.toggle").click(function(e) {
        $(this).next().toggle();
        e.preventDefault();
    });
});​

CSS:

.toggleDiv { display: none; }
.toggle { font: 14px black Tahoma; }

Can anyone point in the right direction. My JSFiddle is here:

http://jsfiddle.net/Painstar/bkVNk/

Thanks!

​

Answer 1

I’ve updated the fiddle you sent with how I’d do it:

jQuery

var current = 1;
$(function() {
$("a.toggle").click(function(e) {
    if(current <= 4) {
      $("#moreLocations" + current).show();
    current += 1;
    }
e.preventDefault();
 });
});

HTML

<a class="toggle" href="#">Add another Location</a>
<div id="moreLocations1" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations2" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations3" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations4" class="toggleDiv">insert more locations dropdownbox</div>

Assuming you wish to have the 4 boxes as seperate items.

You could also use the .sibling() with the ID, but if you know the ID‘s then that should be fine.