Question

* Scenario

i wish to make a jquery effect like the one found on this website, which is sitting to the right of the main flash add:

http://www.commbank.com.au/

* Problem

I have made a start, but have hit a little snag with muy method.. perhaps its not the best way to achieve my desired effect, please advise and thanks in advance!!

My Code can be found here:

http://jsfiddle.net/gavAusWeb/HSbzC/1/

Also i will display it below:

* HTML

<div id="latestNewsJs">              
    <div id="lnClickDivs1" class="sideJsBtns sidejsbtn1"></div>
    <div id="hiddenDiv1" class="secretDiv"></div>
    <div id="lnClickDivs2" class="sideJsBtns sidejsbtn2"></div>
    <div id="hiddenDiv2" class="secretDiv"></div>        
    <div id="lnClickDivs3" class="sideJsBtns sidejsbtn3"></div>
    <div id="hiddenDiv3" class="secretDiv"></div>
    <div id="lnClickDivs4" class="sideJsBtns sidejsbtn4"></div>
    <div id="hiddenDiv4" class="secretDiv"></div>
</div>

* CSS

#latestNewsJs {
    border:1px solid red;
    width:106px;
    min-height:100%; 
}
#lnClickDivs1 {}
#lnClickDivs2 {}
#lnClickDivs3 {}
#lnClickDivs4 {}

.sideJsBtns {
    width:106px;
    height:30px;
    position:relative;
    float:left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px 5px 5px 5px;
    border:1px solid #CCCCCC;
}

#hiddenDiv1 {}
#hiddenDiv2 {}
#hiddenDiv3 {}
#hiddenDiv4 {}

.secretDiv {
    background:orange; 
    width:106px; 
    height:100px; 
    display:none; 
    margin-top:-7px;
    float:left;
}

* jquery

jQuery.noConflict();

jQuery(document).ready(function(){         

    var curI = 0;

    jQuery('.sideJsBtns').click(function(){

        curI = jQuery(this).index() + 1;

        jQuery(".secretDiv").slideUp("medium");

        if (jQuery("#hiddenDiv" + curI).is(":hidden")) 
        {
            jQuery("#hiddenDiv" + curI).slideDown("medium");
        } else {
            jQuery("#hiddenDiv" + curI).slideUp("medium");
        }

    });

});

Answer 1

In your code you are using index() method to get the element index. If you dont pass any selector to this method it will give the index relative to all its siblings.

Take a look at this fiddle I have fixed it

http://jsfiddle.net/HSbzC/2/