Difference between revisions of "JavaScript Show / Hide elements"

From All n One's bxp software Wixi

Jump to: navigation, search
(Created page with "The simple way to show or hide elements is to use the style tag of the object. <syntaxhighlight lang="javascript" line start="1" highlight="5"> document.getElementById(strFie...")
 
Line 1: Line 1:
 
The simple way to show or hide elements is to use the style tag of the object.
 
The simple way to show or hide elements is to use the style tag of the object.
  
<syntaxhighlight lang="javascript" line start="1" highlight="5">
+
<syntaxhighlight lang="javascript" line start="1">
 
document.getElementById(strFieldName).style.display = 'none';
 
document.getElementById(strFieldName).style.display = 'none';
 
document.getElementById(strFieldName).style.display = 'inline';
 
document.getElementById(strFieldName).style.display = 'inline';
Line 14: Line 14:
 
Firstly, we've made show / hide separate function calls for easy of use, with a toggle function as well as implicit show and hide.
 
Firstly, we've made show / hide separate function calls for easy of use, with a toggle function as well as implicit show and hide.
  
<syntaxhighlight lang="javascript" line start="1" highlight="5">
+
<syntaxhighlight lang="javascript" line start="1">
 
//========================================================================
 
//========================================================================
 
function fn_Gen_Toggle ( strFieldName ){
 
function fn_Gen_Toggle ( strFieldName ){
Line 36: Line 36:
 
With one function call to fn_Gen_EndElements you can show or hide most of the bottom elements of the page.
 
With one function call to fn_Gen_EndElements you can show or hide most of the bottom elements of the page.
  
<syntaxhighlight lang="javascript" line start="1" highlight="5">
+
<syntaxhighlight lang="javascript" line start="1">
 
function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){
 
function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){
 
//----------------------------------------------------
 
//----------------------------------------------------

Revision as of 08:54, 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' ); }
}