Question

I have a click event inside of which I would like to load different divs according to what has been clicked:

var open = $('.open');
open.click(function(evt) {
    evt.preventDefault();
    overlay.fadeIn(400, function(){
        box.fadeIn(500);
        // if something load box2
        // if something load box3
    });

http://jsfiddle.net/bLDXS/

Open is a class given to the links which relate to box, box2 and box3.
How can I load the content for box2, would I have to use a specific class for each of them?

Answer 1

Edit:
After looking at the fiddle, you’ll have to give each clickable <p> an id, and load the corresponding box.

Html:

<p class="terms open" id="box1_clicker">I agree to the <a href="">terms and conditions.</a></p>

Js:

if($(this).attr("id")=="box1_clicker") {
    // do something
}

Example fiddle

---

You could specify an id for each of the boxes, and then check inside the click which box’s link was clicked, using jquery’s parent():

if($(this).parent().attr("id") == "box1") {
    //some code
}
else if ($(this).parent().attr("id") == "box2") {
    //some code
}
// so on