CODEWITHSUNDEEP
javascriptjqueryhtml
Luuk van Aggelen
Luuk van Aggelen

Reputation: 65

Manipulating multiple divs by ID with a javascript function

I have 15 square image divs on my page. One div is always expanded to be the double width (the blue area), as shown in this screenshot. enter image description here Now what I want to do is depending on no matter what div you click, to expand that div, and decrease the others' width. I have the code working for 1 div in particular (div number 2 to expand, div 1 to decrease)

I don't want to write the code for all 15 divs, where the other 14 are decreased etc. I wonder if there is a way to rewrite this function that it works for all divs.

Thanks in advance

$( "#expand2" ).click(function() {
            if(TriggerClick==0){
                TriggerClick=1;
                $( ".vak2" ).animate({width: '50%',}, 1010 );
                $( ".vakinnerlinks2" ).animate({marginLeft: '55%',}, 1010 );
                $( ".vakinfo1" ).animate({width: '0px',}, 990 );
                $( ".vakinfo1" ).css({"padding":'0px'});
            }else{
                TriggerClick=0;
                $( ".vak2" ).animate({width: '25%',}, 990 );
                $( ".vakinfo1" ).animate({width: '25%',}, 1000 );
                $( ".vakinfo1" ).css({"padding":'25px'});
                $( ".vakinnerlinks2" ).animate({marginLeft: '150%',}, 1010 );
            };
        });
});

Upvotes: 0

Views: 77

Answers (1)

Adarsh Rajput
Adarsh Rajput

Reputation: 1276

Change your HTML to:

<div class="square vak vakinfo">
   <a id="expand"><p>doetwel</p></a>
   <div class="vakinnerlinks"> hi </div>
</div>
<div class="square vak vakinfo">
   <a id="expand"><p>doetwel</p></a>
   <div class="vakinnerlinks"> hi </div>
</div>
 .... so on or 15 divs I m assuming you have 5x3 divs and onClick of one div the previous one will be decrease in width to 0px.
//also change 'vakinfo1'...15 classes to 'vakinfo'

now you JS code will be:

var vakDivs=$(".vak");
var vakInnerDivs=$(".vakinnerlinks");
var vakInfoDivs=$(".vakinfo");
var expandDivs=$("#expand");
var lastExpanded=-1;

vakDivs.each(function(i){
    expandDivs[i].click(function(){
         if(lastExpanded>-1){
             var lastDecreased=lastExpanded-1;
             if(lastExpanded%5==0) lastDecreased=lastExpanded+1;

             vakDivs[lastExpanded].animate({width: '25%',}, 990 );
             vakInnerDivs[lastExpanded].animate({marginLeft: '150%',},1010);

             vakInfoDivs[lastDecreased].animate({width: '25%',}, 1000 );
             vakInfoDivs[lastDecreased].css({"padding":'25px'});
         }

         if(lastExpanded==i) lastExpanded=-1;
         else{
             var divNoToDecrease=i-1;
             if(i%5==0) divNoToDecrease=i+1;

             vakDivs[i].animate({width: '50%',}, 1010 );
             vakInnerDivs[i].animate({marginLeft: '55%',}, 1010 );

             vakInfoDivs[divNoToDecrease].animate({width: '0px',}, 990 );
             vakInfoDivs[divNoToDecrease].css({"padding":'0px'});

             lastExpanded=i;
         }
    }):
});

You can play/change with javascript code to meet your requirement, debugging.

Edit: As I can see your HTML code on paste2.org I guess you have only one vakinfo div and each time you want to decrease that one only. You can change the javascript according to that. If any query/problem, comment... :)

Upvotes: 1

Related Questions