How to enable a tree view in php page?

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>

Answers


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/


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

.next( [selector ] ) Description: 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/


$(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


Need Your Help

Getting count of array items in multi dimensional array

php json facebook-graph-api multidimensional-array foreach

Ok I've been trying for days now to get somewhere with this so please could someone help me out with an answer that actually works? I've been pouring through the JSON data you get from the Facebook...

can't load .sql file into mysql mac

mysql osx-yosemite

I have mysql running, I've switched to my database using: