javascript - Change next div display - input value -

i'm trying hide/show div depending on checkbox, can't make work. i've seen many examples, tutorials, couldn't adapt them case. seems there lot of ways that.

here part of code:

<div id="layer-control">     <p>selectionnez les couches pour les afficher sur la carte.</p>     <div id="reciprocite">         <nav id='filter-group-reci' class='filter-group-reci'></nav>         <div id='recipro-polygon' class='legend' style="display:none;">>             <div><span style='background-color: #e6d94c' 'opacity:0.45'></span>gpv (adhérent urne)</div>             <div><span style='background-color: #010492' 'opacity:0.45'></span>gprmv (adhérent urne)</div>             <div><span style='background-color: #179201' 'opacity:0.45'></span>eh3vv (adhérent urne)</div>             <div><span style='background-color: #920104' 'opacity:0.45'></span>gap </div>             <div><span style='background-color: #404040' 'opacity:0.45' ></span>aappma non réciprocitaires</div>         </div>     </div>     <div id="rivieres">         <nav id='filter-group-rivieres' class='filter-group-rivieres'></nav>         <div id='rivieres-line' class='legend'>             <div><span style="background-color: #0400ff; height: 4px"></span>1ère catégorie dpf</div>             <div><span style="background-color: #6ea5f2; height: 2px"></span>1ère catégorie</div>             <div><span style="background-color: #c110b6; height: 4px"></span>2ème catégorie dpf</div>             <div><span style="background-color: #e48ff5; height: 2px"></span>2ème catégorie</div>             <span><em>*domaine public fluvial</em></span>         </div>     </div> 

var layers = document.getelementbyid('filter-group-reci'); var layers2 = document.getelementbyid('filter-group-rivieres'); var layers3 = document.getelementbyid('filter-group-parcours');  togglelayer('réciprocité', ['reciprocite-gpv', 'reciprocite-gap','reciprocite-gprmv','reciprocite-non-recipro','reciprocite-eh3vv']); togglelayer2('catégories piscicoles',['cours-deau-large-1ere-dpf', 'cours-deau-m-1ere-dpf','cours-deau-s-1ere-dpf','cours-deau-large-2eme-dpf', 'cours-deau-m-2eme-dpf','cours-deau-s-2eme-dpf','cours-deau-large-1ere', 'cours-deau-m-1ere','cours-deau-s-1ere','cours-deau-large-2eme', 'cours-deau-m-2eme','cours-deau-s-2eme'])  //bouton réciprocité function togglelayer(name,ids) {   var input = document.createelement('input');           input.type = 'checkbox';           input.id = ids;           input.checked = false;           layers.appendchild(input);   var label = document.createelement('label');          label.setattribute('for', ids);           label.textcontent = name;           layers.appendchild(label);          input.onclick = function (e) {         e.stoppropagation();         (layers in ids){             var visibility = map.getlayoutproperty(ids[layers], 'visibility');             if (visibility === 'visible') {                 map.setlayoutproperty(ids[layers], 'visibility', 'none');                 this.classname = '';             } else {                 this.classname = 'active';                 map.setlayoutproperty(ids[layers], 'visibility', 'visible');             }          }      };  }  //bouton catégorie piscicoles function togglelayer2(name,ids) {   var input = document.createelement('input');           input.type = 'checkbox';           input.id = ids;           input.checked = true;           layers2.appendchild(input);   var label = document.createelement('label');          label.setattribute('for', ids);           label.textcontent = name;           layers2.appendchild(label);          input.onclick = function (e) {         e.stoppropagation();         (layers in ids){             var visibility = map.getlayoutproperty(ids[layers], 'visibility');             if (visibility === 'visible') {                 map.setlayoutproperty(ids[layers], 'visibility', 'none');                 this.classname = '';             } else {                 this.classname = 'active';                 map.setlayoutproperty(ids[layers], 'visibility', 'visible');             }              }          };      } 

first, i've read may possible using css, "input:checked ~ " tried:

    .legend {     display:none; } #reciprocite-gpv,reciprocite-gap,reciprocite-gprmv,reciprocite-non-recipro,reciprocite-eh3vv input:checked ~ .legend {   display: block; } 

didn't work, maybe caused syntax error?

then tried using javascript (or jquery?)

$(function(){         $("input[type=checkbox]").change(function(){             if ($(this).is(":checked")){                 $(this).next("div").css("display","block");             } else {                 $(this).next("div").css("display","none");             }         });          $("input[type=checkbox]").change();      }); 

could give me hint how accomplish this?

you can use onclickto create toggle-function , check, whether checkbox checked or not. depending on result change text of div.

take @ plunker. here used plain javascript. use jquery use div.html("your text") change text.