Span click find the second div

Question

I asked a previous question in this post : Jquery Span click find next div

In order to get the the first div after my span selector.

I used

$(element.parentNode.nextElementSibling).toggle();

in order to show/hide the first div "list-type-demandes"

now i need to toggle the second div "preview-checked-demandes" and i tried :

$(element.parentNode.nextElementSibling.nextElementSibling).toggle();

don't work. any idea ?

here my php/html code :

foreach ($unassociated as $key => $value){
          //echo '<br/>';

          echo '<label style="color: #1c5081">
                    <span id="open-list" name="open-list" class="open-list" onclick="openList(this)"><b>+</b></span> 
                    <span id="close-list" name="close-list" class="close-list" onclick="closeList(this)" style="display: none"><b>-</b></span> 

                    '.$key.'</label>';

          echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';

          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }
              //var_dump($key1 , $this->candidature->getIdAp() , $checked);
              echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';

          }

          echo '</div>';


          //checked items preview
          echo '<div class="preview-checked-demandes" style="padding-left: 10px ; display: block">';
          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }

              if($checked){
                  echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
              }
          }
          echo '</div>';
      }?>

here my javascript :

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

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

Answer 1

Solution - 1

DEMO

<script>
  $( function() {
    $('.action_list').click(function(){

      // Hide and show the action_list list item
      $(this).parent().find('.action_list').show();
      $(this).hide();

      //you can also use nextAll(). nextAll() returns all the next elements, eq(1) returns the second one amongst them.
        $(this).parent().nextAll().eq(1).toggle();

    });
  } );
</script>

Solution -2

DEMO

You can also try the below solution. I added the details within the code.

<script>
$( function() {
    $('.action_list').on('click', function(){
       // Hide and show the action_list list item
      $(this).parent().find('.action_list').show();
      $(this).hide();

     //On click of open-list and close-list class, getting the target to be toggled from data attribute
     var target = $(this).data('target');
     $('.'+target).toggle();
    });
  });

  </script>

<?php
$i=1;
foreach ($unassociated as $key => $value){
          //echo '<br/>';


        /******************* Added details ************************************
            1- Add class of div which you have need to toggle with data attribute
            2- Add 'action_list' class in open-list and close-list item
        **************** End details ******************************************/

          echo '<label style="color: #1c5081">
                   <span id="open-list" name="open-list" data-target="target_'.$i.'" class="action_list open-list"><b>+</b></span> 
                   <span id="close-list" name="close-list" data-target="target_'.$i.'" class="action_list close-list"  style="display: none"><b>-</b></span> 

                    '.$key.'</label>';

          echo '<div class="list-type-demandes" style="padding-left: 10px ; display: none">';

          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }
              //var_dump($key1 , $this->candidature->getIdAp() , $checked);
              echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';

          }

          echo '</div>';

           /******************* Added details *****************
             Added - Add class target (target_'.$i.') to toggle on click of open-list and close-list 
          /******************* End details ************ */

          echo '<div class="preview-checked-demandes target_'.$i.'" style="padding-left: 10px ; display: block">';
          foreach ($value as $key1 => $value1) {

              $appel_projet_type_demande = null;
              if($appel_projet->getIdAp()){
                  $appel_projet_type_demande = Doctrine_Core::getTable('AppelProjetTypeDemande')->findOneByIdApAndIdTypeDemande($appel_projet->getIdAp(), $key1);
              }


              if ($appel_projet_type_demande) {
                  $checked = 'checked';
              } else {
                  $checked = '';
              }

              if($checked){
                  echo '<label style="display: inline"><input type="checkbox" class="checkbox_type_demande_preview" data-appel-projet="' . $appel_projet->getIdAp() . '" name="appel_projet[type_demande_list][' . $i++ . ']" value="' . $key1 . '" id="appel_projet_type_demande_list_' . $key1 . '" ' . $checked . '> ' . $value1 . '</label><br/>';
              }
          }
          echo '</div><div style="clear:both"></div>';

          $i++;
      }?>