CODEWITHSUNDEEP
javascriptjqueryhtml
Terence Bruwer
Terence Bruwer

Reputation: 239

showing hiding div not working

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');
});

Upvotes: 0

Views: 69

Answers (3)

j08691
j08691

Reputation: 208032

.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

Upvotes: 3

James Williams
James Williams

Reputation: 4216

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

Upvotes: 0

baxri
baxri

Reputation: 307

Try this code to show/hide details 

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

Upvotes: 0

Related Questions