toggle div content on click

Question

There is edit button inside every h5 element and if i click on this button it will hide the div with class-name 'not-editable' and display div with class-name 'editable'.

The code i written is working perfectly only if i have one container but if i add another container and try to click edit button it'll update both the divs of respective container.

Here's i'm attaching the code for above functionality.

Just try to click on 'edit' and it'll update both of the divs, what i'm looking for is, update only the respective div that i clicked edit button not all the divs [based on 'this' value it'll update the div, i tried with 'this' but don't know why it's not working, if possible try to explain why my code is not working because i'm newbie in JavaScript.].

Hope you understand and thanks in advance for your help.

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var noEdit = $('.not-editable');
  var edit = $('.editable');
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

.not-editable{
	display: block;
}
.editable{
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-1">
  <h5>
    header 
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
     Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
   another header 
   <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
     another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

Answer 1

Use this JS

Get reference to the closest container

var container = this.closest('.container-1');

Select elements inside that container only as follows

 var noEdit = $('.not-editable',container);
 var edit = $('.editable',container);

Whole JS

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var container = this.closest('.container-1');
  var noEdit = $('.not-editable',container);
  var edit = $('.editable',container);
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

Snippet

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var container = this.closest('.container-1');
  var noEdit = $('.not-editable',container);
  var edit = $('.editable',container);
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

.not-editable{
	display: block;
}
.editable{
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-1">
  <h5>
    header 
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
     Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
   another header 
   <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
     another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

Answer 2

  <script>
     $('.edit_toggle').click(function(e){
     e.preventDefault();
     $(this).parent().next().hide();
     $(this).parent().next().next().show();
     });
  </script>

If you want to keep the same HTML Structure above script will work for you.

Answer 3

You have several issues. Firstly you're retrieving all the .not-editable and .editable elements, not just those related to the clicked .edit_toggle. Secondly, this is the .edit_toggle. Calling find() on that is redundant as the elements you're looking for are not child elements of that. Lastly, you need to check the length property in the if condition as a jQuery selector returns an object, which always equates to true.

To fix the issue you can amend your logic to get the closest() container, then find() the required elements from there, like this:

$('.edit_toggle').click(function(e) {
  e.preventDefault();
  var $container = $(this).closest('.container-1');

  $container.find('.not-editable').fadeOut();
  $container.find('.editable').fadeIn();
});

.not-editable { display: block; }
.editable { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-1">
  <h5>
    header
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
    Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
    another header
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
    another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

Answer 4

Use parent and find. Example below.

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var noEdit = $(this).parent().parent().find('.not-editable');
  var edit = $(this).parent().parent().find('.editable');
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

.not-editable{
	display: block;
}
.editable{
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-1">
  <h5>
    header 
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
     Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
   another header 
   <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
     another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

Answer 5

When you do this:

  var noEdit = $('.not-editable');
  var edit = $('.editable');

You're already querying the DOM for objects that have these classes, and as a result, save them to the variable (compare it to document.querySelectorAll('.not-editable'). Try the same while saving the classes as strings (or hard-code them or whatever):

  var noEdit = '.not-editable';
  var edit = '.editable';