JavaScript Forum

**soap** · 06-13-2009, 03:35 AM

I'm sort of stumbling around through the dark with this but I have these three divs which are going to collapse and expand on click.

Code:

<div id="work">
    <h1>WORK</h1>
    
    <div class="top">
        <h1>Affluent Practice Marketing</h1>
        <img onclick="arrowChange()" class="arrow" id="arrowImg0" src="images/arrowDown.png" alt="" />
    <div class="clear"></div>
    </div>
    <div id="sec0" class="sec">
        <img src="images/ss-apm.jpg" alt="" />
    </div><!-- end sec -->
    
    <div class="top">
        <h1>Affluent Practice Marketing</h1>
        <img onclick="arrowChange()" class="arrow" id="arrowImg1" src="images/arrowDown.png" alt="" />
    <div class="clear"></div>
    </div>
    <div id="sec1" class="sec">
        <img src="images/ss-apm.jpg" alt="" />
    </div><!-- end sec -->
    
    <div class="top">
        <h1>Affluent Practice Marketing</h1>
        <img onclick="arrowChange()" class="arrow" id="arrowImg2" src="images/arrowDown.png" alt="" />
    <div class="clear"></div>
    </div>
    <div id="sec2" class="sec">
        <img src="images/ss-apm.jpg" alt="" />
    </div><!-- end sec -->
    
</div><!-- end work -->

Then I have this Javascript (which I'm still new to).

Code:

function arrowChange() {
    for (i=0;i < 3; i++) {
        var arrow = new Array();
        arrow[0] = document.getElementById('arrowImg' + i);
        arrow[1] = document.getElementById('arrowImg' + i);
        arrow[2] = document.getElementById('arrowImg' + i);
        
        var sec = new Array();
        sec[0] = document.getElementById('sec' + i);
        sec[1] = document.getElementById('sec' + i);
        sec[2] = document.getElementById('sec' + i);
    }
    alert(sec);
    if(arrow.src == 'http://localhost/owen/v2/images/arrowDown.png') {
        arrow.src = 'images/arrow.png';
        sec.style.padding = "0";
        sec.style.height = "0px";
    }else {
        arrow.src = 'images/arrowDown.png';
        sec.style.height = "auto";
        sec.style.padding = "15px";
    }
}

The basic function of the javascript is to have the arrows change source, obviously and to have the "sec" divs collapse and expand. (I have yet to attempt to add animation to them).

If anybody needs clarification on anything let me know. It should be pretty simple but I'm obviously doing something wrong. I can achieve this effect with only one div and I could do it by making a bunch of different functions but I am going for not having to make different functions and actually utilizing javascript, hence the for loop. But it doesn't work, so please help!

Thanks!