Difference between revisions of "JavaScript Show / Hide elements"

From All n One's bxp software Wixi

Jump to: navigation, search
Line 64: Line 64:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
[[Category:JavaScript]]

Revision as of 13:47, 16 March 2012

The simple way to show or hide elements is to use the style tag of the object.

document.getElementById(strFieldName).style.display = 'none';
document.getElementById(strFieldName).style.display = 'inline';

Inline shows the item.

None hides the item.

In campaigns to save time, we've implemented a lot of automatic show and hides.

Firstly, we've made show / hide separate function calls for easy of use, with a toggle function as well as implicit show and hide.

//========================================================================
function fn_Gen_Toggle ( strFieldName ){
	if (document.getElementById(strFieldName).style.display == 'none'){
		fn_Gen_Show ( strFieldName );
	}
	else {
		fn_Gen_Hide ( strFieldName );
	}
}
//========================================================================
function fn_Gen_Hide ( strFieldName ){
	document.getElementById(strFieldName).style.display = 'none';
}
//========================================================================
function fn_Gen_Show ( strFieldName ){
	document.getElementById(strFieldName).style.display = 'inline';
}

With one function call to fn_Gen_EndElements you can show or hide most of the bottom elements of the page.

function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){
	//----------------------------------------------------
	if ( blComments == false) { fn_Gen_Hide ( 'tableBE_Comments' );	}
	else{ fn_Gen_Show ( 'tableBE_Comments' ); }
	//----------------------------------------------------
	if ( blOutcome == false) { fn_Gen_Hide ( 'tableBE_Outcome' );	}
	else{ fn_Gen_Show ( 'tableBE_Outcome' ); }
	//----------------------------------------------------
	if ( blCallback == false) { fn_Gen_Hide ( 'tableBE_Callback' );	}
	else{ fn_Gen_Show ( 'tableBE_Callback' ); }
	//----------------------------------------------------
	if ( blAssignedTo == false) { fn_Gen_Hide ( 'tableBE_AssignTask' );	}
	else{ fn_Gen_Show ( 'tableBE_AssignTask' ); }
	//----------------------------------------------------
	if ( blViewAppointments == false) { fn_Gen_Hide ( 'tableBE_ViewAppointments' );	}
	else{ fn_Gen_Show ( 'tableBE_ViewAppointments' ); }
	//----------------------------------------------------
	if ( blAppFrom == false) { fn_Gen_Hide ( 'tableBE_AppointmentFrom' );	}
	else{ fn_Gen_Show ( 'tableBE_AppointmentFrom' ); }
	//----------------------------------------------------
	if ( blAppUntil == false) { fn_Gen_Hide ( 'tableBE_AppointmentTo' );	}
	else{ fn_Gen_Show ( 'tableBE_AppointmentTo' ); }
	//----------------------------------------------------
	if ( blClosing == false) { fn_Gen_Hide ( 'tableBE_ClosingScript' );	}
	else{ fn_Gen_Show ( 'tableBE_ClosingScript' ); }
}