Raphael Bergeron Raphael Bergeron - 2 years ago 63
Javascript Question

make an image bigger on click, and go back to small on second clic

I have made this jquery wich make all my img bigger when I clic a button, but I dont know how to make them go back to the original size when i click that same button again:P

<script type="text/javascript">
height: "500px",
width: "500px"

Answer Source

There is some ways to do it with jQuery, you can do it with like this:

$(document).ready(function () {
        var small={width: "200px",height: "116px"};
        var large={width: "400px",height: "232px"};
        var count=1; 
        $("#imgtab").css(small).on('click',function () { 
            count = 1-count;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgtab" class='small' src="http://www.stories4kid.com/313667_195.jpg">

You can also use toggleClass (info here) it is good option too.


$('#imgtab').on('click', function(e) {
img {
    height: 200px;
    width: 116px;
    -webkit-transition: all .4s ease-in;

.fullSize {
    height: 250px;
    width: 232px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgtab" src="http://www.stories4kid.com/313667_195.jpg">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download