Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Html Property Of Siblings Not Changing With Js

Post a Comment
I believe the simplest way to explain my problem is directly running the code snippet. I'm trying to do a file tree structure. Basically I need an UL HTML element to properly chang

Solution 1:

Just use jquery methods toggle and toggleClass

functioninit_php_file_tree() {
  $('.pft-directory a').on('click', function() {
    var a = $(this)
    a.toggleClass('closed');
    $('ul', a.parent()).toggle();
  });
};
jQuery(init_php_file_tree);
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><body><ul><liclass="pft-directory"><aclass="closed"href="#">Parent directory </a><ulstyle="display: none;"><liclass="pft-file ext-pdf">File Name </li><liclass="pft-file ext-doc">Another File Name </li></ul><ulstyle="display: none;"><liclass="pft-directory">Directory Name </li><liclass="pft-directory">Another Directory Name </li></ul></li><!-- There's a problem with your solution (and maybe with my question, sorry!). If you have more than 2 directories in the same level they all expand and collapse, no matter wich one you click --><liclass="pft-directory"><aclass="closed"href="#">Parent directory </a><ulstyle="display: none;"><liclass="pft-file ext-pdf">File Name </li><liclass="pft-file ext-doc">Another File Name </li></ul><ulstyle="display: none;"><liclass="pft-directory">Directory Name </li><liclass="pft-directory">Another Directory Name </li></ul></li></ul></body></html>

Post a Comment for "Html Property Of Siblings Not Changing With Js"