Question

I checked out similar questions but couldn’t find the answer.

I have this HTML:

<table>
<td>
<a href="#">click me</a>
<div class="showme"><p>test</p></div>
</td>
<td>
<a href="#">click me</a>
<div class="showme"><p>test 2</p></div>
</td>
<td>
<a href="#">click me</a>
<div class="showme"><p>test 3</p></div>
</td>
</table>

<div class="container" rel="showme"></div>

What I want: I want the div.showme to be hidden originally, and when the link inside the TD is clicked, that div.showme loads in div.container.

What I tried:

jQuery(document).ready(function($) {

    $("td a").click(function() {  
        $(".showme").html($(this).attr('rel'));
    });

});

Answer 1

maybe this will do what you want

$(function(){
        $("table td>a").click(function(e){
            e.preventDefault();
            //get the html content
            var cont = $(this).parent().children(".showme").html();
            //add it to the desired div
            $(".container").html(cont);
        });
    });

and you will need a little bit of css

.showme{
display: none;

}