Jquery: Get Content / Innerhtml Onclick

If you click on a cell on this page, it loads the larger version of the image. I'm trying to achieve this same effect. What I have gotten so far: http://jsfiddle.net/8mYW9/ First o

Solution 1:

If you change the ID attribute to class for the appear elements you can do this:

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        var $this = $(this);//cache the $(this) selector since it will be used more than once
        $this.children('.appear').html('item id: ' + $this.children('a').attr('id')).fadeToggle('slow');
    });
});

Demo: http://jsfiddle.net/8mYW9/7/

BTW you can't have multiple elements with the same ID in a HTML document.

Solution 2:

You could do that with:

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        $(this).append('<div>' + $(this).find('a:first').attr('id') + '</div>');
    });
});

JS Fiddle demo.

Amended so that only oneid is shown (others are removed before showing the latest):

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        $(this).closest('.container').find('.appended').remove();
        $(this).append('<div class="appended">' + $(this).find('a:first').attr('id') + '</div>');
    });
});

JS Fiddle demo.

Incidentally, it escaped my notice the first time, but with multiple elements sharing the same id you have invalid (X)HTML: an idmust be unique within the document (citation: W3.org).

References:

• attr().
• closest().
• find().
• :first selector.
• remove().

Solution 3:

Try using class selectors instead. You've got duplicate IDs:

$(document).ready(function() {
    $('.appear').hide();
    $('.links').click(function() {
        $(this).find(".appear").fadeToggle('slow', function() {
            $(this).html('item id:')
        });
    });
});

http://jsfiddle.net/8mYW9/