Need to sort divs to access links within

Question

Hi,

Need a little help with this... the idea is that it scrolls through divs.... But when I get to the next div I can’t access that specific link but only the first divs link... think i need to swap the divs but not 100% on the best method.

this would be the HTML structure...

    <div class="insightcontainer">

<div class="insightArticle">
<div id="insight1"><a href=”link one”></a></div>
<div id="insight2"><a href=”link two></a></div>
</div>

<div class="insightbuttons">
More articles
<a onclick="insightPrevious();return false;" href="#"></a>
<a onclick="insightNext();return false;" href="#"></a>
</div>

</div>

this is the jQuery...

var totalInsight;
var currentInsight = 1;
var  disableButtons = false;


function insightNext()
{
    if(!disableButtons)
    {
    nextInsight();
    }
    }


function insightPrevious()
{
     if(!disableButtons)
     {
     previousInsight();
     }
}


function getTotalInsight()
{
    totalInsight = $("[id^='insight']").length;
}


function nextInsight()
{
    disableButtons = true;
    slideInsightOut(currentInsight);
    moveCurrentInsight();
    setTimeout("slideInsightIn()", 200);

}

function previousInsight()
{
    disableButtons = true;
    slideInsightOut(currentInsight);
    moveCurrentBack();
    setTimeout("slideInsightIn()", 200);

}


function slideInsightOut(id)
{
    $("#insight"+currentInsight).animate({opacity:"0"},200);
    setTimeout("disableButtons = false;", 300);
}

function slideInsightIn()
{
    $("#insight"+currentInsight).animate({opacity:"1"},200);
    setTimeout("disableButtons = false;", 300);
}



function moveCurrentBack()
{
    if(currentInsight  == 1)
    {
        currentInsight = totalInsight;
    }
    else{
    currentInsight--;
    }

}



function moveCurrentInsight()
{
    if(currentInsight  == totalInsight)
    {
        currentInsight =1;
    }
    else{
    currentInsight++;
    }

}


$(document).ready(function(){



getTotalInsight();

$(".insightArticle >[id^='insight']").animate({opacity:"0"},1);

$("#insight1").animate({opacity:"1"},1);




if(totalInsight > 1)
{
    totalInsight= totalInsight-1;
}


 });

any help would be greatly appreciated :0)

Answer 1

Check out this question and answer... is something like this what you were looking for?

Edit: Opps the link broke =/

Answer 2

Managed to sort it by adding a class with a z-index on and then appending it when it moves to the next.... Also if I ask a question again i will take on all your recommendations

Cheers