JQuery code is not working using PHP Code for Posts and Pages plugin for Wordpress

Question

I am made to use plugin PHP Code for Posts and Pages in worpress page. I want to expand row details after clicking on it like in this example: http://jsfiddle.net/ardeezstyle/4FKCa/1/

I can't do it using the plugin. After clicking the button row details are not expanded. Maybe someone is familiar with it and could help me? Here is my code:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
$(document).delegate('input[type="button"]','click',function(){
if($(this).parents('tr').next('tr').find('div').length==0){
    $('[colspan="5"]').parent('tr').remove();
    $(this).parents('tr').after('<tr/>').next().append('<td          colspan="5"/>').children('td').append('<div/>').children().css('background','#f0f0f0').html($($(this).data('href')).html());
}else{
    $('[colspan="5"]').parent('tr').remove();
}
});
</script>

<style type="text/css">
    #content1,
    #content2,
    #content3 {
        display: none;
    }
    table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px solid #000; 
        padding: 5px; 
        vertical-align: top;
    }
</style>

<?php

echo '
<table summary="test" cellspacing="0" id="master">
<colgroup>
    <col width="40px">
    <col span="4" width="25%">
</colgroup>

<thead>
<tr>
 <th>&nbsp;</th>
 <th><span>Customer</span></th>
 <th><span>OrderID</span></th>
 <th><span>Order date</span></th>
 <th><span>Order Total</span></th>
</tr>
</thead>

<tbody>
<tr>
    <td><input type="button" name="" value=" " data-href="#content1" ></td>
    <td>Ernst Handel</td><td>10258</td><td>07/17/1996</td><td>$403.72</td>
</tr>

<tr>
    <td><input type="button" name="" value=" " data-href="#content2"></td>
    <td>Wartian Herkku</td><td>10270</td><td>08/01/1996</td><td>$1,376.00</td>
</tr>

<tr>
    <td><input type="button" name="" value=" " data-href="#content3"></td>
    <td>Magazzini Alimentari Riuniti</td><td>10275</td><td>08/07/1996</td>            <td>$15.36</td>
</tr>

</tbody>
</table>

<div id="content1">
<h2>content for row 1</h2>
<table>
<thead>
    <tr>
        <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis             egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris     placerat eleifend leo.</p>
</div><!-- content1 -->

<div id="content2">
<h2>content for row 2</h2>
<table>
<thead>
    <tr>
        <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris     placerat eleifend leo.</p>
</div><!-- content2 -->
<div id="content3">
<h2>content for row 3</h2>
<table>
<thead>
    <tr>
        <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis     egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.     Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris     placerat eleifend leo.</p>
</div>';
?>

Answer 1

Your code relies on jQuery. You have to make sure that is being included. Also you should wrap it in the jQuery ready function like $(document).ready(function(){...rest of your code Also I think wordpress uses jQuery instead of $ so you'll have to wrap it and then give it the dollar in the anonymous function of ready .

jQuery(document).ready(function ($) {
    $(document).delegate('input[type="button"]', 'click', function () {
        if ($(this).parents('tr').next('tr').find('div').length === 0) {
            $('[colspan="5"]').parent('tr').remove();
            $(this).parents('tr').after('<tr/>').next().append('<td colspan="5"/>').children('td').append('<div/>').children().css('background', '#f0f0f0').html($($(this).data('href')).html());
        } else {
            $('[colspan="5"]').parent('tr').remove();
        }
    });
});

http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Answer 2

Yes, you will need the $(window).ready() function, but I'm, not sure why you have all this extraneous code? You can just use the following which has the same effect, but is much more efficient.

$(window).ready( function() {

$(document).on('click', 'input[type="button"]', function() {

    var DOMtag = $(this).data('href');

    $(DOMtag).toggle();

}); 

});