vendredi 8 septembre 2017

select next element only

in my code I have three checkbox.Out of three first one has no class and rest of them have 'hidecheck'. Now i want when the checkbox is clicked then the div add class 'hidecheck' and remove the 'hidecheck' from next class' Please help me doing this . I have applied a jquery code but it only add the class 'hidecheck' and removes all the next 'hidecheck' class . I want when click first checkbox it will show the second checkbox only and then when check on second checkbox then it will add 'hideclass' and removes from last one

$('.fa-thumbs-o-up').on('click', function() {
  $('.imgtext').addClass('hidechktext');
  $('.imgtext').siblings().next('.imgtext').removeClass('hidechktext');
});
.hidechktext {
  opacity: 0;
  display: none;
}
<script src="http://ift.tt/1oMJErh"></script>
<div class="imgtext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img1" id="chkimg1">
    <label for="chkimg1">
      <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeA
     </p> 
    </label>
  </a>
</div>
<div class="imgtext hidechktext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img2" id="chkimg1">
    <label for="chkimg1">
     <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeB
      </p> 
    </label>
  </a>
</div>
<div class="imgtext hidechktext">
  <a class="nextimgs">
    <input class="hidecheck" type="checkbox" name="imganimate" value="img3" id="chkimg1">
    <label for="chkimg1">
      <p> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>
        LikeC
      </p> 
    </label>
  </a>
</div>

Aucun commentaire:

Enregistrer un commentaire