Manipulating multiple divs by ID with a javascript function

Question

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 );
            };
        });
});

Thanks for the fast reply. paste2.org/hbUN2ZV7 Check the paste2 link. This is the first 2, but the other are the same (vak13,vak14,vak15 etc) — Luuk van Aggelen
– Luuk van Aggelen, Commented Jan 24, 2015 at 10:47
@LuukvanAggelen - Edit your question and add the actual markup. — Cyclonecode
– Cyclonecode, Commented Jan 24, 2015 at 10:55
Man your quesiton is really unclear but instead of giving ids to links, you cas add a class and call click function like $(".yourGivenClass").click(.. and inside this function you can use $(this).parent() instead of $( ".vak2" ) to access the div where the link clicked is in and $(".square").not($(this).parent()) for all the other divs — Batu.Khan
– Batu.Khan, Commented Jan 24, 2015 at 11:05

Adarsh Rajput · Accepted Answer · 2015-01-24 11:55:02Z

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... :)

Collectives™ on Stack Overflow

Manipulating multiple divs by ID with a javascript function

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