jQuery addClass example

Change class name on click in jQuery

by JonNorman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputEditToggle">
  <input type="text" value="The Value" />
  <div class="read">The Value</div>
</div>
<br>
<div class="inputEditToggle">
  <input type="text" value="Next Value" />
  <div class="read">Next Value</div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

$(document).ready(function(){
  $(".inputEditToggle").click(function(){
    $(this).find("input").show().focus().blur(function(){
      var val = $(this).val();
      $(this).hide().parent().find("div.read").show().html(val);
    });
    $(this).find("div.read").hide();
  }).find("input").hide();
});