How to turn this jQuery function into an if statement

Question

Now I'm trying to write a jquery function that allows me to expand a div when you click on it, and then return it to its original size when you click it again.

I tried adding a button to cancel it, but since when I click on it, the script thinks that I also click on the parent div and expand again. Ideally, I would like to do this without a button.

The code I have is

(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 out https://jsfiddle.net/wykL6u7u/11/ and make sure it suits 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 JS is just a class switch:

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

Answer 2

I suggest using "toggleClass" and rely on CSS classes, not strictly encoded CSS values. Agree with @ sebastian-wramba

The fact is that here the back button is not needed at all. I figured this out with the understanding that op would prefer it not to be there, but clicking on a div makes the switch. Feedback is welcome if I do not read these 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 disable children of the main "grid" through jquery " on ", rather than using a separate class. Then I added a new class "nodisplay" to hide other elements.

Answer 3

Therefore, thinking about it, I did it like that. He performs 2 calculations to find out the percentage of the width and height of the grid and makes an animation based on this. I set it to expand and contract based on the click of the grid, but if you want to use a button, just change the click binding to the back id buttons.

 $('.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 4

Try the following:

 $(document).ready(function(){ var expand = true; $('#block1').click(function(){ var width='33.3%', height="50%"; if(expand){ width='100%'; height='100%'; expand=false; }else{ expand=true; } $('#block1').animate({ width: width, height: height }); }); }); 

Answer 5

Try storing values ​​in an array using Array.prototype.reverse()

I think @BillGarrison is correct. Without explanation, it is not obvious how the code works.

Explanation:

An approach is a “switch” procedure. Use the value arr[0] for the process; reverse arr ; use the value arr[0] for the next process; reverse arr .

This approach can be implemented without using Array.prototype.reverse() ; using 0 and 1 , undefined ; see Is .toggle () vulnerable in recent jQuery versions? .

The approach can also be extended to cycle through or switch values ​​of n sequentially, returning to the original value after repeating all elements of the array.

  var arr = [ ["100%", "100%"], ["33.3%", "50%"] ]; $("#block1").click(function() { $(this).animate({ // at initial click, set `width` to `arr[0][0]` : `100%`, // set `height` to `arr[0][1]` : `100%` // reverse `arr` // at second click `arr[0]` : `["33.3%", "50%"]`; // set `width` to `arr[0][0]` : `33.3%` // set `height` to `arr[0][1]` : `50%`; // repeat procedure width: arr[0][0], height: arr[0][1] }, function() { arr.reverse() }); }) 

jsfiddle https://jsfiddle.net/wykL6u7u/14/

Answer 6

I would suggest you change the logic. This is easier if you add a specific class and let CSS do the animation.

 $('.block').click(function(ev){ $(ev.target).toggleClass('active'); }); 

This way you can remove the button from the .block elements.

Add animation and a new class to CSS:

 .block{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .block.active{ width: 100%; height:100%; } 

I have not tested this code. I hope this works.

- EDIT -

ev.target is not a jQuery element. I wrapped it in $ (ev.target), otherwise it did not have .toggleClass ();