Collapsing Tree not working

Question

I am trying to create a collapsing tree and was able to find the answer here.

However, when I click on the folder, it doe not collapse and I am not sure why the second item does not appear.

$('.folder').on('click', function(e) {
		  var folder = $(this).find('.sub-folder');
			  if (e.target !== this) return;
			
			  if(folder.hasClass('hidden1')) {
				folder.removeClass('hidden1');
			  } else {
				folder.addClass('hidden1');
			  }
	});

.folder {
  		cursor: pointer;
	}
	.sub-folder{
		cursor:pointer;	
	}


	                   
                       		 Disease Management
                            
                            	
                                	 Disease Management

UPDATE

The following i the toggle and it does not work out for me:

var toggle = function () {

        $(this).parent().children().toggle();
        $(this).toggle();

    };

$(".Collapsable").click(toggle);
$(".Collapsable").each(toggle);
	});


	                   
                       		 Disease Management
                            
                            	
                                	 Disease Management

and shows the following image:

However, it appears the hidden folder already. Not when the user clicks on the button and then the second files appears

UPDATE 2

Below is what I and it still does not show the hidden link

// JavaScript Document$('.folder').on('click', function(e) {
$(document).on('click', '.folder', function(){
  var folder = $(this).find('.sub-folder');
  folder.toggleClass('hidden1');
});

.folder {
  cursor: pointer;
}
.sub-folder {
  cursor: pointer;
}
.hidden1 {
  display: none;
}





	                   
                       		 Disease Management
                            
                            	
                                	 Disease Management

Adjit · Accepted Answer

You are over complicating this. You don't need any of those if statements. The point of jQuery is to simplify all of this and instead just use something like .toggleClass() instead of an if-else.

Also, it seems like you do not have a CSS attribute telling any element with the class hidden1 to be hidden.

See the edits below and it should work as desired.

$('.folder').on('click', function(e) {
  var folder = $(this).find('.sub-folder');
  folder.toggleClass('hidden1');
});

.folder {
  cursor: pointer;
}
.sub-folder {
  cursor: pointer;
}
.hidden1 {
  display: none;
}



  
     Disease Management
    
      
         Disease Management

Collapsing Tree not working

Answers (1)

Related Questions