+ Start a Discussion
TimJinSDTimJinSD 

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

 

 

 

 

 

MarosMaros

Probably you do not have correct HTML (visualforce tags) structure, try to post some piace of code. you should hasve something similar in HTML

<repeat of items>
<div class="item_header>
<img src="icon"/>
Cabinet
<div class="subitems">
<repeat of subitems..../>
</div>
</div>
</repeat>

 and if someone click on icon you hide children div of icon o which user click

 

 

TimJinSDTimJinSD

 

 

It's a double nested repeat.

 

<Tbody id="taskBody">
  <apex:repeat var="task" value="{!taskList}"> OUTER REPEAT
    <tr class="dataRow">
       <td class="dataCell">
          <apex:inputCheckbox rendered="{!AND(task.taskName != 'Inspection'......!= 'Labor Scope')}" value="{!task.addTask}"/>                                       
          <apex:image rendered="{!OR(task.taskName = 'Inspection'..... = 'Labor Scope')}" value="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}"
		   styleclass="plusIcon {!IF(task.taskName = 'RPS Order'........con',IF(task.taskName = 'Labor Scope','laborScopePlusIcon',''))))}" />
       </td>  
       <td class="dataCell" >
          {!task.taskName}	
       </td>
    </tr>                                
    <apex:repeat var="varLaborScopeTask" value="{!laborScopeTaskWrapperList}" rendered="{!Task.taskName = 'Labor Scope'}"> MIDDLE REPEAT
        <apex:variable var="outer" value="{!varLaborScopeTask.taskName}" />                                  
	  <tr class="dataRow laborScopeTask">
	     <td class="dataCell">
		<table>
		   <tr>
		      <td style="width:2px"> 
                      </td>			                            
		      <td class="dataCell">			                            
		         <apex:image rendered="{!Task.taskName = 'Labor Scope'}" value="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}"			                                               
		           styleclass="plusIcon {!IF(outer = 'Cabinet','cabinetPlusIcon',IF(outer = 'Countertop','countertopPlusIcon',
			   	                 IF(outer = 'Millwork','millworkPlusIcon',IF(outer = 'Plumbing','plumbingPlusIcon',
			  	                 IF(outer = 'Appliance','appliancePlusIcon',IF(outer = 'Electrical','electricalPlusIcon',
				                 IF(outer = 'Hardware','hardwarePlusIcon',IF(outer = 'Flooring','flooringPlusIcon',
				                 IF(outer = 'Painting','paintingPlusIcon',IF(outer = 'Construction','constructionPlusIcon',
				                 IF(outer = 'HVAC','hvacPlusIcon','laborScopeSubPlusIcon')))))))))))}" />
		        </td>  
	                <td class="dataCell" >			                                              
		            {!varLaborScopeTask.taskName}
		        </td>			                            
		   </tr>
		</table>
	      </td>
          </tr>
	  <apex:repeat var="varLaborScopeSubTask" value="{!laborScopeSubTaskWrapperList}"> INNER REPEAT
	     <apex:variable var="inner" value="{!varLaborScopeSubTask.taskName}" />
	     <apex:variable var="sclRender" value="{!LEFT(outer,4) = LEFT(inner,4)}" />	
	     <apex:variable var="tempclass" value="{!IF(outer = 'Cabinet','cabinetTask',IF(outer = 'Countertop','countertopTask',
						     IF(outer = 'Millwork','millworkTask',IF(outer = 'Plumbing','plumbingTask',
						     IF(outer = 'Appliance','applianceTask',IF(outer = 'Electrical','electricalTask',
						     IF(outer = 'Hardware','hardwareTask',IF(outer = 'Flooring','flooringTask',
						     IF(outer = 'Painting','paintingTask',IF(outer = 'Construction','constructionTask',
						     IF(outer = 'HVAC','hvacTask','laborScopeSubTask')))))))))))}" />				                             	
		 <tr class="dataRow {!tempclass}">			                            		                           
		   <apex:outputPanel id="thePanel" rendered="{!sclRender}">	                            
		     <td class="dataCell">
		        <apex:inputCheckbox styleClass="nestedCheckbox2" value="{!varLaborScopeSubTask.addTask}" />                                                 			                                
		      </td>  
		      <td class="dataCell" >			                                      
		         {!varLaborScopeSubTask.taskName}
		      </td>
		     </apex:outputPanel>
	          </tr>	
	  </apex:repeat> INNER REPEAT
      </apex:repeat>  	MIDDLE REPEAT                        			                   
</apex:repeat> OUTER REPEAT
</Tbody>

 

Thanks for taking the time to look at this.  

 

Tim