hide unhide div container easy

teldrive 25 Mar, 2014

Answer

2 Likes

:D Just to feedback to this forum with some useful information here is the working code that allows hide-unhide containers easily, first of all what do we need?
[attachment=0]Captura1.JPG[/attachment]
a checkbox that :
when checked must hide button "1" and show container box with some fields
when uncheck must show button "1" and hide container box with some fields
[attachment=1]Captura2.JPG[/attachment]

this is easy implemented with events in chronoforms v5, the issue comes when you want hide state for container on loading form
[attachment=2]Captura3.JPG[/attachment]
I couldn't find information about this, and not very expert on JavaScript programming but finally I found a simple JS code

function showcontainer(boxid){
   document.getElementById(boxid).style.visibility="visible";
}
 
function hidecontainer(boxid){
   document.getElementById(boxid).style.visibility="hidden";
}
window.addEvent('load',function(){
hidecontainer('box2');
});

this must be in load JS action before HTML (render Form)
also is necesary change basic events by our functions
[attachment=3]Captura4.JPG[/attachment]

oz

ozneilau 24 May, 2014

Thanks very much, this helped me a lot as there isn't much documentation for some of the ChronoForms v5 features yet.

Using display:block; and display:none; woked better for me than visibility:visible; and visibility:hidden; like this:

function showcontainer(boxid){
   document.getElementById(boxid).style.display="block";
}
 
function hidecontainer(boxid){
   document.getElementById(boxid).style.display="none";
}
window.addEvent('load',function(){
hidecontainer('box2');
});

Gr

GreyHead 26 May, 2014

Hi,

The main difference between using 'display' and 'visiibility' is that 'visibility:hidden' leaves an empty space in the page whereas 'display:none' closes up the space.

I'm not clear how CFv5 handles validation here but in CFv4 I made it a practice to set any hidden element to 'disabled' to block validation and also to remove any values or selections in case they showed up if the input was later re-displayed.

Bob

oz

ozneilau 26 May, 2014

Thanks for the tip Bob!

The fields I am showing/hiding are all set as mandatory fields. ChronoForms v5 seems to skip the validation when the fields are set to 'display:none;' so this works well.

Ro

RobP 21 Aug, 2014

It also seems to work if you make it a Custom container and put:

<div id="id-of-box" class="chronoform-container" style="display: none;">"

in the start code.

Rob

Ro

RobP 22 Aug, 2014

The last " should not be in the code.
And there must be a </div> in the End code.

You can also make it a Panel with this in the start code:

<div id="klachten" class="panel panel-default chronoform-container" style="display: none;">
<div class="panel-heading">klachten</div>

Ro

RobP 22 Aug, 2014

The above examples hide the container when the form is loaded and you can show/hide them with a event

Forums

hide unhide div container easy