显示隐藏的div不起作用

Question

Hi all I have the following html code

<div id="orderlist">
    <div class="panel" id="1">
        <div class="p_header">Order No: 1
            <input class="ordview" type="button" value="View Details"/>
            <input class="select" type="button" value="Add"/>
        </div>
        <div class="p-content" style="display:none;">
            <table>
                <tr><td>Contact Person:</td><td></td></tr>
                <tr><td>Telephone:</td><td></td></tr>
                <tr><td>E-Mail:</td><td></td></tr>
                <tr><td>Address:</td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td>Code</td><td></td></tr>
                <tr><td>City</td><td></td></tr>
            </table>
        </div>
    </div>
</div>

with the following jquery to toggle it but it is not working, cannot figure out why though

$("body").on('click',".ordview",function(){
   $(this).closest('div.p-content').css('display','block');
   alert('view button clicked');
});

Answer 1

.closest() goes up the DOM and p.content isn't an ancestor, but div.panel is. Use:

$("body").on('click', ".ordview", function () {
    $(this).closest('div.panel').find('div.p-content').toggle();
});

jsFiddle example

Answer 2

Try this code to show/hide details

  $(".ordview").bind('click', function () {
      $(this).parent().next().toggle();
  });  

Answer 3

I personally would use the toggle() command. Below funciton works and can check jsFiddle

$("body").on('click',".ordview",function(){
   $(this).closest('div.panel').children('div.p-content').toggle();
});

jsFiddle Example