jQuery finding next class outside div and toggle class

Question

rather new to jquery and having an issue where i want to toggle a class on the closest class i request.

Code example below, any ideas what im doing wrong here?

 // more info functions $('.popup').click(function() { $(this).closest('.popup-input').toggleClass('hidden'); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_1_Popup" name="PC_Row_1_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text"> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_2_Popup" name="PC_Row_2_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text"> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_3_Popup" name="PC_Row_3_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text"> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_4_Popup" name="PC_Row_4_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text"> 

Answer 1

You can use parent() to move up to the parent div then use next('.popup-input') to target the next element with class popup-input and finally toggle class using toggleClass() , check example bellow.

Hope this helps.

---

 $('.popup').click(function() { $(this).parent().next('.popup-input').toggleClass('hidden'); }) 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_1_Popup" name="PC_Row_1_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text"> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_2_Popup" name="PC_Row_2_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text"> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_3_Popup" name="PC_Row_3_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text"> <div class="column medium"> <div class="icon info popup">link</div> <div class="icon more"></div> </div> <input type="text" id="PC_Row_4_Popup" name="PC_Row_4_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text"> 

Answer 2

$('.popup').closest('.poput-input') 

will give you the closest ancestor while traversing upwards.

You can use

$(this).parent().next('.popup-input');

to traverse(downwards) to the next popup-input in the DOM tree.

Answer 3

You can toggle with your javascript code snippet as well. You need to change your JS and HTML code a bit.

// more info functions
$('.popup').click(function() {
    $(this).closest('.column').find('.popup-input').toggleClass('hidden');
});

<div class="column medium">
  <div class="icon info popup">link</div>
  <div class="icon more"></div>
  <input type="text" id="PC_Row_1_Popup" name="PC_Row_1_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text">
</div>