CODEWITHSUNDEEP
javascriptphpjquery
Shibbir
Shibbir

Reputation: 409

jQuery show/hide is not working

I have following loop in php:

foreach ($sid as $key => $value) {
    $sql = " a sql query ";
    $vehicle->rowQuery($sql);
    $numRows = $vehicle->rows;

        while ( $data = $vehicle->result->fetch_assoc()) {
            $vid            = $data['vid'];
            $vehicleName    = $data['vehicleName'];
            $noOfSeat       = $data['noOfSeat'];
            $seatBooked     = $data['seatBooked'];
            $supplierName   = $data['supplierName'];

            echo "<table class='table table-bordered table-condensed table-striped'>";
                echo "<tr>";
                    echo "<th colspan='4' class='success'>
                    <label class='checkbox-inline'>
                    <input type='checkbox' class='vehicleClass' name='vid[]' value='{$vid}'>$vehicleName<strong> ( $noOfSeat Seats available) - $supplierName
                    </label>
                    <div class='pull-right'><a href='#' class='hideMe'>Show/Hide</a></div></strong>&nbsp;
                    <input type='hidden' name='noOfSeat[$vid]' value='$noOfSeat'>
                    </th>";
                echo "</tr>";
                echo "<tr>";
                    echo "<th colspan='4'>All Seats</th>";
                echo "</tr>";

                $count = 0;
                for ($seat=1; $seat <= $noOfSeat; $seat++) {

                    if($count % 4 == 0) {
                        echo "</tr><tr class='toggleMe'>";
                    }
                    echo "<td><label class='checkbox-inline'><input type='checkbox' name='seatNo[$vid][]' value='$seat'>Seat $seat </label></td>";

                    $count++;
                }
            echo "</table>";
        }

    if( $numRows == 0 ) {
        echo "<table class='table table-bordered table-condensed table-striped'>";
        echo '<tr><td class="alert alert-warning">Your selected vehicle is not available.</td></tr>';
        echo "</table>";
    }
}

It's output is like that:

enter image description here

Now, I am trying to show and hide the corresponding All Seats Checkbox list whne I click on show/hide link using following jQuery:

$(document).ready(function(){
    $('.hideMe').click(function() {
        $(this).next('.toggleMe').toggle();
    });
});

But show/hide it's not working. Can you guys tell me how can I solve it?

Thanks.

===================

Update:

When the loop result is this :

enter image description here

then using this code it's working fine: 

$(document).ready(function(){
    $('.hideMe').click(function() {
        $('.toggleMe').toggle();
    });
});

Upvotes: 0

Views: 154

Answers (3)

Bai Nguyen
Bai Nguyen

Reputation: 834

Do you use ajax to get the html? if yes, you had better use $('body').on('click,'.hideMe',function() {}) and tr is not next element of .hideMe
You can try this code.

$(document).ready(function(){
    $('body').on('click','.hideMe',function() {
        $(this).parents('table').find('.toggleMe').toggle();
    });
});

Upvotes: 3

Rajesh V
Rajesh V

Reputation: 156

I think your structuring with "<tr>" is not correct in

if($count % 4 == 0) { echo "</tr><tr class='toggleMe'>"; }

this will add a </tr> at the beginning of each toggleMe class.

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

I think you should use on('Click',function(){ }) instead of click try this

    $(document).ready(function(){
    $('body').on('click', '.hideMe', function() {
        $(this).next('.toggleMe').toggle();
    });
});

Upvotes: 0

Related Questions