javascript - Enlarge img on click, click again to minimize -

i'm making website requires pictures clickable. if click on image should enlarge , show in middle of screen. if click again should go smaller again , on place.

$(document).ready(function() {      $("#header").load("header.html .header");      $("#footer").load("footer.html .footer");        $("body").on('click', function(){            if(!$(".img1, .img2").hasclass('enlarged')){                $(".img1, .img2").on('click',function(){                    $(this).addclass('enlarged');              });          }else{              $("body").on('click', '.enlarged', function(){                    $(this).removeclass('enlarged');              });          }        });  });

.enlarged{    position:absolute;    z-index:2;    width:500px;    height:600px;    top:-10%;    left:300px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="container" class="container">    <aside class="aside"><img src="fotos/foto1.jpg" id="img1" class="img1" style="transform:rotate(90deg);"/><img src="fotos/foto2.jpg" class="img2" style="transform:rotate(90deg);"/></aside>    <div class="box"></div>  </div>

my current script works wonky. enlarges once , have triple-click.

i made question before, after updated nobody answered.

also i'm not sure how add images on stack overflow, otherwise would've made snippet.

your click handler isn't performing logic want, it's assigning other click handlers. upon further clicks performing logic want (sort of), further assigning more click handlers. after couple clicks, going entirely weird.

you want one click handler target elements:

$("body").on('click', '.img1, .img2', function(){  }); 

this handler invoked .img1 or .img2 on page. inside handler, conduct logic:

if (!$(this).hasclass('enlarged')) {     $(this).addclass('enlarged'); } else {     $(this).removeclass('enlarged'); } 

or, simpler:

$(this).toggleclass('enlarged');