Javascript Skip hide/show divs

Question

I am not that strong when it comes to JS. However I have written a little bit of code that does exactly what I want it to do.

function showDiv(divName)
{
    var divnameids = new Array();
    divnameids[0] = "accessories";
    divnameids[1] = "connections";
    divnameids[2] = "features";
    divnameids[3] = "phones";
    divnameids[4] = "services";
    for (var i=0;i<divnameids.length;i++)
    {
        if (divnameids[i] == divName) divnameids.splice(i, 1);
    }
    for (var i=0;i<divnameids.length;i++)
    { 
        document.getElementById(divnameids[i]).style.display='none';
        document.getElementById('but' + divnameids[i]).className = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
    }   
    document.getElementById('but' + divName).className = "quotebutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
    document.getElementById(divName).style.display='block';
}

This works but the corresponding buttons triggering the opening and closing of divs like tabs. However I now wish to use another button to skip through these divs in order (the same order as the JS array)

could somebody suggest the best approach to doing this?

Answer 1

This code should open each div, and then close the previous one:

var currentPos = 0;

$('#yourButtonId').on('click', function () {
        if (currentPos > 0)
            $('#' + divnameids[currentPos - 1]).hide();
        if (currentPos == 0) // hide the last tab when coming back to the start
            $('#' + divnameids[divnameids.length - 1]).hide();

        $('#' + divnameids[currentPos]).show();
        currentPos += 1;

        // Reset the current position to 0
        if (currentPos >= divnameids.length)
            currentPos = 0;
    });

Answer 2

Assuming that you wanted a pure Javascript solution, this works (assuming that I was in the ballpark on your HTML):

function nextDiv() {
    var divnameids = new Array();
    divnameids[0] = document.getElementById("accessories");
    divnameids[1] = document.getElementById("connections");
    divnameids[2] = document.getElementById("features");
    divnameids[3] = document.getElementById("phones");
    divnameids[4] = document.getElementById("services");
    var len = divnameids.length;

    for(var i=0; i < len; i++) {
        if(i == (len - 1)) {
            divnameids[len-1].style.display = 'none';
            divnameids[0].style.display = '';
            break;
        }
        else {
            if(divnameids[i].style.display == '') {
                divnameids[i].style.display = 'none';
                divnameids[i+1].style.display = '';
                break;
            }
        }
    }
}

JSFiddle: http://jsfiddle.net/yjf8w/

Answer 3

    $(document).ready(function(){
    $(".content-box-front").click(function(){
        $(".full-content-back").fadeIn("slow");
        $(".full-content-front").fadeIn("slow");
        $(".content-box-front").fadeOut("slow");
        $(".content-box-back").fadeOut("slow");
    });

});

    $(document).ready(function(){
    $(".full-content-front").click(function(){
        $(".full-content-back").fadeOut("slow");
        $(".full-content-front").fadeOut("slow");
        $(".content-box-front").fadeIn("slow");
        $(".content-box-back").fadeIn("slow");
    });

});

this should help put the name of the divs in where full-content.... is