CODEWITHSUNDEEP
javascriptjqueryvariablesloopsif-statement
patwick600akabob
patwick600akabob

Reputation: 31

jQuery using variables so one function performs multiple tasks

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.

Upvotes: 0

Views: 195

Answers (1)

user757095
user757095

Reputation:

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

  1. i get rid of the div.miniBox, i thought they weren't necessary for achiving your needs.
  2. 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.
  3. 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.

Upvotes: 1

Related Questions