You need to sign in to do that
Don't have an account?
jQuery collapsible nested list
I have added an item to an existing list. The new item is an expanding/contracting list with secondary expanding/contracting sub items. The second level items have check boxes under them.
The problem I am having is when I contract the Main Item (Labor Scope) without first contracting theSub Item (Cabinet) the checkboxes are still visible. (second screenshot below)
Here is what it looks like.
The new list item when fully expanded
The list expands fine and the data is saved correctly. The list contracts correctly when the Sub Item (Cabinet) is contracted before contracting the Main Item(Labor Scope)
Contract main list without contracting Sub Items(Cabinet) the related checkboxes are still visible but I want them hidden
I am relatively new to Visualforce and the jQuery in this page is the first I have worked with. I have done a lot of research and have seen similar code to what I have but haven't been able to figure out how to get my list to collapse correctly. I am thinking in my jQuery script I need to relate the list with parent/child. I'm just sure how to do so. Again, I inherited the program so I have only added to it to get my collapsible list.
Here is my jQuery related to the new list item and the added list
// -------- This is the code related to the parent Expand/Collapse Icon -------- $(".laborScopePlusIcon").toggle(function(){ $('.laborScopeTask').show(); this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/Collapse.png')}"; }, function() { $('.laborScopeTask').hide(); this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}"; }); // -------- This is the code related to the Child Expand/Collapse Icon -------- $(".laborScopeSubPlusIcon").toggle(function(){ $('.laborScopeSubTask').show(); this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/Collapse.png')}"; }, function() { $('.laborScopeSubTask').hide(); this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}"; });
Any help or advice would be greately appreciated.
Tim Johnson
Probably you do not have correct HTML (visualforce tags) structure, try to post some piace of code. you should hasve something similar in HTML
and if someone click on icon you hide children div of icon o which user click
It's a double nested repeat.
Thanks for taking the time to look at this.
Tim