How to enable a tree view in php page?

Question

I have a mysql database. In a table i have some entries of uploaded file. I want to display that on a php page. But those files are categorized by one column. So what i want is to have that categories name on that page. In front of each name i want to have a button. Initially when page loads it should not show the files. when some one click on a button then that corresponding category should expand. But i am unable to do it. I am giving you a link to sample code. HTML code

<span class="show"></span>
<p>category</p>
<table width='100%' class='tree'>
   <tr> 
      <td width='70%'><b>Name</b></td>
      <td width='30%'><b>Last Updated</b></td>
   </tr>
</table>

http://jsfiddle.net/SumitRathore/FqcSM/

Edit

this is my sample html code where i am showing the tables. This code have some variables name and sql query don't go for that. I have found the answer here http://jsfiddle.net/JGLaa/2/ but that is not working here. I dont know why?

  <span class="show"></span>
  <p><b>category<b></p><br/>
  <table width='100%' class='tree'>
  <tr>
  <td width='35%'><b>Name</b></td> 
  <td width='25%'><b>Last Updated</b></td>
  </tr>
  while($row = $result_sql->fetch_assoc())
  {
      <tr>
  <td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td> 
      <td width='25%'>{$row['created']}</td>
      <td width='25%'><input type='checkbox' class='checkbox'><input type='button'  class= 'input1 input_box' value='delete' name='delete' id= '{$row['id']}'><input type='button' class='input2 input_box2' value='edit' name='edit' id= '{$row['id']}'></td>                                          
    </tr>

     }
     </table>

Answer 1

Looking at you code the use of the next selector is flawed. From Jquery.com:

.next( [selector ] )
Get the immediately following sibling of each element in the set of matched elements. 获取匹配元素集中每个元素的紧随其后的兄弟。 If a selector is provided, it retrieves the next sibling only if it matches that selector.

I would suggest to sourround your button and table with a div and use the following code:

$(document).ready(function(){
$(".show").html("<input type='button' value='Show All' class='treebtn'>");
    $('.tree td').hide();
    $('.treebtn ').click( function() {
        $(this).parent().parent().find('table td').toggle();
        if (this.value=="Show All") this.value = "Hide All";
        else this.value = "Show All";
    });
});

http://jsfiddle.net/FqcSM/3/

Answer 2

Your issue is that .next() searches the siblings, so it does not find a table . Try traversing up to the buttons parent ( span ), and then find the span's sibling table -

$(this).parent().nextAll('table:first').find('td').toggle();

updated JSFiddle - http://jsfiddle.net/JGLaa/1/

here is an updated JSFiddle that has multiple buttons/tables - http://jsfiddle.net/JGLaa/2/

Answer 3

$(document).ready(function(){
$(".show").html("<input type='button' value='Show All' class='treebtn'>");
    $('.tree').hide();
    $('.treebtn ').on('click', function() {
        $(this).parent('span').next('table').toggle();

    if (this.value=="Show All") this.value = "Hide All";
    else this.value = "Show All";

    });
});

fiddle