Show/Hide values in table

Question

I have a table structured like that:

<table id="example">
<thead>
<tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
</tr>
</thead>

<tbody>
<tr>
   <td>some php to get custom field</td>
   <td>also custom field- the loop is above so this is working as it should</td>
   <td>
   <a href="#" class="showhide"> 
    <div class="more">
     .. the content I want to show when user clicks a class="showhide"
    </div>
   </a>
   </td>
<tr>
</tbody>
</table>

I tried to implement with jQuery, but nothing happens. This is the jQuery I tried:

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});

I also make it with document.ready and still not working. Is there any other way to do that?

All I want is that the content of the div class="more" is to be shown under the row in the table (and in front of the next one), of course when the a class="showhide" is clicked.

I am using this together with plugin DataTables, but this is not causing problems.

Answer 1

The class you have is showmore not showhide

Live Demo

$(function() {
  $('.showmore').click(function(){
    $(this).next().toggle()
  });
});

Edit based on OP comments: I have shorten the html to make it simple and took div out of a tag.

Live Demo

Html

<table id="example">
    <tbody>
        <tr>
            <td> <a href="#" class="showhide"> Show / Hide </a>

                <div class="more">.. the content I want to show when user clicks a class="showmore"</div>
            </td>
        </tr>
    </tbody>
</table>

Javascript

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});