Hide and show container with checkbox

Question

maybe if you have an idea
http://www.chronoengine.com/forums/posts/f2/t97774.html?page=1
=> i want to hide and show container with checkbox => when i check it's good but when i unchecked container doesn't hide !

[[>> This is a new topic so I've moved it to a new thread : Bob <<]]

BNDragon · Accepted Answer

Hi micker,

I reply the other topic, but stays here my awser too😉

Hi micker,

I used the access that you gave me yesterday and created a solution in jQuery.

I had to remove the sliders and left as div. What I suggest is that you do the same fizes up with "Oxydation" (#Oxydation div > chronoform#slider-container-69 [Jaune]), thus becomes with the same shape of the sliders, because as you can see, is slightly different.

Here is the solution in jQuery(First action on event on load [Load JavaScript]):

jQuery(function () {
 
  jQuery("#div_oxydation").slideUp(500);
  jQuery("#slider_fibroblastes").slideUp(500);
  jQuery("#slider_inflamatoire").slideUp(500);
  jQuery("#slider_barriere_cutanee").slideUp(500);
  jQuery("#slider_keratisation").slideUp(500);
  jQuery("#slider_hyperseborhee").slideUp(500);
  jQuery("#slider_pigmentaire").slideUp(500);
  jQuery("#slider_flore").slideUp(500);

  
jQuery("input[type='checkbox']").prop('checked',false);

   jQuery("input[type='checkbox']").change(function () {
   if(this.checked)
switch (this.value) {
    case "oxydation":
 jQuery("#div_oxydation").slideDown(800);
	break;
    case "trouble-extracellulaire":
  jQuery("#slider_fibroblastes").slideDown(800);
	break;
    case "inflammation":
  jQuery("#slider_inflamatoire").slideDown(800);
	break;
    case "trouble-barriere-cutanee":
  jQuery("#slider_barriere_cutanee").slideDown(800);
	break;
    case "trouble-keratinisation":
  jQuery("#slider_keratisation").slideDown(800);
	break;
    case "hyper-seborrhee":
  jQuery("#slider_hyperseborhee").slideDown(800);
	break;
    case "trouble-pigmentation":
  jQuery("#slider_pigmentaire").slideDown(800);
	break;
    case "trouble-flore-cutanee":
  jQuery("#slider_flore").slideDown(800);
	break;
	default:
	 jQuery("#div_oxydation").slideUp(500);
  jQuery("#slider_fibroblastes").slideUp(500);
  jQuery("#slider_inflamatoire").slideUp(500);
  jQuery("#slider_barriere_cutanee").slideUp(500);
  jQuery("#slider_keratisation").slideUp(500);
  jQuery("#slider_hyperseborhee").slideUp(500);
  jQuery("#slider_pigmentaire").slideUp(500);
  jQuery("#slider_flore").slideUp(500);
}
else
switch (this.value) {
    case "oxydation":
  jQuery("#div_oxydation").slideUp(500);
	break;
    case "trouble-extracellulaire":
  jQuery("#slider_fibroblastes").slideUp(500);
	break;
    case "inflammation":
  jQuery("#slider_inflamatoire").slideUp(500);
	break;
    case "trouble-barriere-cutanee":
  jQuery("#slider_barriere_cutanee").slideUp(500);
	break;
    case "trouble-keratinisation":
  jQuery("#slider_keratisation").slideUp(500);
	break;
    case "hyper-seborrhee":
  jQuery("#slider_hyperseborhee").slideUp(500);
	break;
    case "trouble-pigmentation":
  jQuery("#slider_pigmentaire").slideUp(500);
	break;
    case "trouble-flore-cutanee":
  jQuery("#slider_flore").slideUp(500);
	break;
	default:
	 jQuery("#div_oxydation").slideUp(500);
  jQuery("#slider_fibroblastes").slideUp(500);
  jQuery("#slider_inflamatoire").slideUp(500);
  jQuery("#slider_barriere_cutanee").slideUp(500);
  jQuery("#slider_keratisation").slideUp(500);
  jQuery("#slider_hyperseborhee").slideUp(500);
  jQuery("#slider_pigmentaire").slideUp(500);
  jQuery("#slider_flore").slideUp(500);
}
  });
});

Cya
BN

Translation problem, sorry:

...What I suggest is that you do the same fizes up with "Oxydation"...

What I suggest is that you do the same you do with the "Oxydation"

I also change the condtions, I set enable/disable instead of show / hide not to create conflicts with the code.

Cya,
BN

Cya,
BN