jQuery using variables so one function performs multiple tasks

Question

I'm a real noob and every time I've tried to implement any of these things it just stops working altogether...

I have 4 boxes on my page that should each expand and contract in the direction the little blue tabs are facing.

The thing I'd like to know, which I tried to implement but just have no idea about, was if there was a way I could input some variables so the same function could be performed by the other boxes but in different directions...

.exp1 needs to be replaced so a variable with value 1-4 goes in place of the number

eg/ .exp(variable value from 1 to 4)

Depending on which value .exp takes, the other classes variable numbers need to change further down in the code

eg/ .box3 would need to be .box(variable value from 1 to 4) .miniBox3 would be .miniBox(variable value from 1 to 4) and lastly .con1 would be .con(variable value from 1 to 4)

The values and properties in animate would also need to change

eg/ instead of being .animate({bottom... it could be .animate({left... with a new va;lue like 30px instead of 10px

In the expandFunction() the rules are:

if it's .exp1... then .box3 closes replaced by .miniBox3, .box1 expands and .exp1 is switched to .con1

if it's .exp2... then .box1 closes replaced by .miniBox1, .box2 expands and .exp2 is switched to .con2

if it's .exp3... then .box4 closes replaced by .miniBox4, .box3 expands and .exp3 is switched to .con3

if it's .exp4... then .box2 closes replaced by .miniBox2, .box4 expands and .exp4 is switched to .con4

In the contractFunction() the .box, .exp and .con numbers are all the same.

Here's the code:

$(document).ready(function () {

//function declared expand
$('.exp1').click(function(){
expandFunction();
});
});

//expand function properties
    function expandFunction(){
        if($(".box3").is(":visible"))
        {
        $('.box3').animate({left:'100%', top:'70px', width:'0px', height:'0px'}, 
        "slow", function(){
            $(this).switchClass("box3", "miniBox3", "slow");
            $('.exp3').hide();$('.miniBox3').show("fast");//hide blue bar, show box in sidebar

                        $('.box1').animate({bottom:'10px'}, "slow", function(){ //opens box right
                $('.exp1').unbind('click').removeClass('exp1').addClass('con1')
                            .click(function(){
                           contractFunction();
                            });
                             });
        });
        }
        else
                           {
        $('.box1').animate({bottom:'10px'}, "slow", function(){ //opens box right
            $('.exp1').unbind('click').removeClass('exp1').addClass('con1')
                        .click(function(){
                       contractFunction();
                        });
    });
    }
}
//};

function contractFunction(){
    $('.box1').animate({bottom:'46.5%'}, "slow", function(){
        $('.box1 div').unbind('click').removeClass('con1').addClass('exp1').click(function(){
            expandFunction();
        });
    });
}

Here's a fiddle

(My first problem was that the 1st box (top left) expands once, contracts once and then doesn't do anymore. It should continually expand and contract to infinity. SOLVED WITH IF ELSE STATEMENT)

Thank you very much in advance for any pointers and help you can give me.

in contractFunction you didn't reposition the .box3 so the second time you try to animate it there's nothing to do so the callback won't trigger. .box3 didn't exist, it's now .minibox3!!!! — user757095
– user757095, Commented Feb 27, 2014 at 13:43
OK, I tried putting an if else statement in expandFunction but it didn't work. My thinking was if .box3 is showing then perform functions up to showing .miniBox3, else do everything else... How would I implement what you're saying? @crisim il numenoreano — patwick600akabob
– patwick600akabob, Commented Feb 27, 2014 at 14:17
No, sorry, forgot brackets!! Fixed it! :) jsfiddle.net/y6EQW/3 Now how would I implement variables? — patwick600akabob
– patwick600akabob, Commented Feb 27, 2014 at 14:23
Thanks for pointing where I was going wrong! @CrisimIlNumenoreano — patwick600akabob
– patwick600akabob, Commented Feb 27, 2014 at 14:37

score 1 · Accepted Answer · 2014-02-28 08:04:36Z

i've updated your fiddle with just a few things.

i get rid of the div.miniBox, i thought they weren't necessary for achiving your needs.
i rewrited the css classes you used so i can perform the animations just adding and removing classNames and each box now has a unique id.
i added to the trigger divs a data- attribute (thanks html5) to store the id of the related box to hide/show, so i can retrive that value with ease with the jQuery.data() function.

here a sample of html

<div id="a1" class="box">
    <div class="exp" data-related="a3"></div>
    1
</div>

and here the code i used

$(function () {
  $('.exp').click(function () {
    var exp = $(this);                          //this is the clicked trigger
    var parent = exp.parent();                  //this is the parent box
    var related = $('#' + exp.data('related')); //this is the related box

    if (exp.is('.con')) { // check if the box is expanded 
                          // i can do the same with  parent.is('.maxi')
      //expanded
      parent.removeClass('maxi' /* shrink the box */,
                         'slow',
                          function () { 
        exp.removeClass('con'); //now i know the parent box is no more expanded
        related.removeClass('mini', 'slow'); //restore the related box
      });
    } else {
      //collapsed
      related.addClass('mini' /* minimize the related box */,
                       'slow',
                       function () {
        exp.addClass('con'); //this to know if parent is expanded
        parent.addClass('maxi', 'slow'); //expand the parent box
      });
    }
  });
});

you can check the full code in this fiddle

EDIT: so, to answer your question (how to do this with variables) i say you can use the state of your elements as variables themself.

Collectives™ on Stack Overflow

jQuery using variables so one function performs multiple tasks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related