How do I turn this jQuery function into an 'if' statement

Question

Right now I'm trying to write a jquery function which lets me expand a div when you click it, then return it to its initial size when you click it again.

I tried adding a button to make it retract, but because when I click it the script thinks I'm also clicking the parent div and expands again. Ideally, I'd like to do it without having a button.

The code I've got is here -

(jsfiddle): https://jsfiddle.net/Nikf/wykL6u7u/9/

<div class="grid">
        <div class="block" id="block1">
            <button class="retractor" id="ret1">back</button>
        </div>
        <div class="block" id="block2">2</div>
        <div class="block" id="block3">3</div>
        <div class="block" id="block4">4</div>
        <div class="block" id="block5">5</div>
        <div class="block" id="block6">6</div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    height: 100%;
}

.grid{
    width: 100%;
    height: 100%;
    /*background-color: #114411;*/
}

.block{
    width: 33.3%;
    height: 50%;
    float: left;
    color: #FFFFFF;
    position: relative;
}

.retractor{
    width: 50px;
    height: 50px;
    padding: 10px 0;
    text-align: center;
    background-color: #FF0000;
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;

    position: absolute;
    bottom: 30px;
    right: 30px;
}

#block1{
    background-color: #222222;
}           

#block2{
    background-color: #999999;
}           

#block3{
    background-color: #5555555;
}           

#block4{
    background-color: #999999;
}   

#block5{
    background-color: #333333;
}       

#block6{
    background-color: #CCCCCC;

Script

$('#block1').click(function(){
    $('#block1').animate({
        width: '100%',
        height: '100%'
    });
});

$('#block1').click(function(){
    $('#block1').animate({
        width: '33.3%',
        height: '50%'
    });
});

Answer 1

You can use jQuery toggleClass in combination with CSS transitions to get the same result. Check https://jsfiddle.net/wykL6u7u/11/ and see if that fits your needs.

What I've done:

.block {
  width: 33.3%;
  height: 50%;
// ...
  transition: all 1s;
}

.block.expanded {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

And the JS is just the class toggle:

$('#block1').click(function(){
        $(this).toggleClass("expanded");
});

Answer 2

So after thinking it over I did it this way. It does 2 calculations to find out the percentage of the width and height of the grid and does an animate based on that. I have it set to expand and contract based on the grid click but if you want to use the button just change the click binding back to the back buttons id.

$('.grid').click( function() {
  var heightPercentage = ( 100 * parseFloat($('.grid').css('height')) / parseFloat($('.grid').parent().css('height')) ) + '%';  
  var widthPercentage = ( 100 * parseFloat($('.grid').css('width')) / parseFloat($('.grid').parent().css('width')) ) + '%'; 
  var toggleWidth = widthPercentage === "100%" ? "33%" : "100%";
  var toggleHeight = heightPercentage === "100%" ? "50%" : "100%";
  $('.grid').animate({ 
    width: toggleWidth,
    height: toggleHeight
  });       
});

https://jsfiddle.net/bgarrison25/o7k2y25q/1

Answer 3

I suggest using "toggleClass" and relying on CSS classes rather than hard-coded CSS values. Agree with @sebastian-wramba

The thing is we don't really need the back button here at all. I took it out with the understanding that op would prefer it not being in there but that the click on the div do the toggle. Feedback welcome if I'm not reading the requirements correctly.

https://jsfiddle.net/e15kxkdr/3/

<div class="grid">
      <div class="block" id="block1">1</div>
      <div class="block" id="block2">2</div>
      <div class="block" id="block3">3</div>
      <div class="block" id="block4">4</div>
      <div class="block" id="block5">5</div>
      <div class="block" id="block6">6</div>
</div>

.grid{
    width: 100%;
    height: 100%;
    /*background-color: #114411;*/
}

.block{
    width: 33.3%;
  height: 50%;
    float: left;
    color: #FFFFFF;
    position: relative;
}
.nodisplay {
  display: none;

}

$('.grid').on("click", "div", function(){
        $(this).toggleClass("grid")
        $(this).toggleClass("block")
        $(this).siblings().toggleClass("nodisplay")
    })

Update: I changed this to work off the children of the main element "grid" via the jquery "on" subelement rather than using a separate class. Then I added a new class "nodisplay" to hide the other elements.