CODEWITHSUNDEEP
phpjquery
John Doe
John Doe

Reputation: 2924

Why I cant hide and show an element using JQuery?

Here is my block of Php code in which I am rendering the table row:-

Actually what I am trying to achieve is that on the click of the button in the first row I should be able to show the next row, which is previously hidden by using .hide() in the document ready script.

     <?php
         echo "<tr>";
            echo "<td>"."<button id= \"btnnumber_". $i ." \"  class=\"btn info toggler\" data-value=\" $val\">Show Info  <i class=\"icon-arrow-down\"></i></button>"."</td>"; // On click of this button I am taking its id in Jquery getting the number at end creating the id of the next row in the Jquery script.
         echo "</tr>";

         echo "</tr>";
            echo "<tr id=\"row_$i \" class=\"info_row\">";// This row is dynamically generated one each row has its unique id like 0 row is having id row_0,1 row is having id row_1 etc.
            echo "<td id=\"student_count\">"."students count:"."</td>";
            echo "<td id=\"start_date\">"."start date: "."</td>";
            echo "<td id =\"end_date\">"."end date: "."</td>";
            echo "<td></td>";
        echo "</tr>";

 ?>

This row is initially set to hide in document ready by using the following JQuery:-

          $(function(){

              $('.info_row').hide();// On document load I am hiding all the element with class info_row.


              $('.toggler').toggle(function(){// Then I am toggling between hide and show.

               var currentId = $(this).attr('id');
               var number = currentId.substr(currentId.length - (currentId.length - currentId.indexOf("_") - 1));
               var rowId = 'row_' + number;
               $("#" + rowId).show();
             }, function(){

              var currentId = $(this).attr('id');
              var lastChar = currentId.substr(currentId.length - (currentId.length - currentId.indexOf("_") - 1));
              var rowId = 'row_' + lastChar; 
              $("#" + rowId).hide();

      });  
    });

I am not able to achieve the toggle i.e the row is not hiding and showing as I was trying to achieve.

Any help will be highly appreciated.

Upvotes: 1

Views: 193

Answers (1)

SteveP
SteveP

Reputation: 19093

This line look like a problem 

 echo "<tr id=\"row_$i \"

In that there is a spurious space in the id.

echo "<tr id=\"row_$i\"

Upvotes: 3

Related Questions