Jquery Span click find next div

Question

I try to toogle div class from a span click i tried

$(this).closest(".div").find(".list-type-demandes").toggle();

but it doesn't work.

if i use :

$(".list-type-demandes").toggle();

it's works but it's showing me the two div and i need to display the div from "this" span

here HTML :

<label style="color: #1c5081">
        <span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>
        </span> Organisation, support et services
      </label>

      <div class="list-type-demandes" style="padding-left: ; display: none">
         <label style="display: inline">
         <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
        </label>
      </div>

      <label style="color: #1c5081">
        <span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b></span> Applications
      </label>


      <div class="list-type-demandes" style="padding-left: ; display: none">
        <label style="display: inline">
        <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
        </label>
      </div>

here the script :

function toogleListTypeDemande(element) {
        $(this).closest(".div").find(".list-type-demandes").toggle();
    }

Answer 1

Use ID unique and check below code,

You can use directly click also

$('.toogle-toobar-open').click(function(){
  $(this).closest("label").next(".list-type-demandes").toggle();
});

 label{ display:block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> function toogleListTypeDemande(element) { $(element).closest("label").next(".list-type-demandes").toggle(); } </script> <label style="color: #1c5081"> <span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>Organisation, support et services </span> </label> <div class="list-type-demandes" style="padding-left: ; display: none"> <label style="display: inline"> <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise </label> </div> <label style="color: #1c5081"> <span id="toolbar-open2" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b> Applications</span> </label> <div class="list-type-demandes" style="padding-left: ; display: none"> <label style="display: inline"> <input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche </label> </div> 

Answer 2

You need to modify toogleListTypeDemande(element) just a little.

Javascript offers the attribute nextElementSibling to get the next html element. Unfortunately there is no next sibling to your span element. So we need to travel one node back to get it's parent element.parentNode - which is the label - and from there the next sibling is the div.

function toogleListTypeDemande(element) {
        $(element.parentNode.nextElementSibling).toggle();
    }