What happen on my javascript? it's not working properly

Question

I really don't know what wrong about my code, but it not working properly when i preview my HTML. Did i miss out anything!?

Isuue, when click down, g1 and g2 working good, but when g2 i click on down button, it should be appear g3, but it jump to g4, and my up and down button are not working anymore :(

function chgPic(id) {
  $('#show').attr('src', id).stop(true, true).hide().fadeIn();
}

//tooltip (rename the element to put tooltip on it "title")
//$(document).ready(function() {
//  $("#simple").tiptip();
//});

function up() {
  if (document.getElementById('g1').style.display == 'block') {
    $('#g1').show();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g2').style.display == 'block') {
    $('#g1').show();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g3').style.display == 'block') {
    $('#g1').hide();
    $('#g2').show();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g4').style.display == 'block') {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').show();
    $('#g4').hide();
  }
  else {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').show();
  }
}

function down() {
  if (document.getElementById('g1').style.display == 'block') {
    $('#g1').hide();
    $('#g2').show();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g2').style.display == 'block') {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').show();
    $('#g4').hide();
  }
  else if (document.getElementById('g3').style.display == 'block') {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').show();
  }
  else {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').show();
  }
}

Answer 1

I think that there is something wrong with your markup, so that the elements aren't what you think. For example if you haven't closed the #g3 tag properly, the #g4 tag could be inside the #g3 tag.

You have a little more code thanm you need, but it should work fine if you have the elements set up right.

You can use jQuery to check which elements are visible, that way you don't need to specifically set the display style to block on the element initally for the code to work:

function up() {
    if ($('#g2').is(':visible')) {
    $('#g1').show();
    $('#g2').hide();
  }
    else if ($('#g3').is(':visible')) {
    $('#g2').show();
    $('#g3').hide();
  }
    else if ($('#g4').is(':visible')) {
    $('#g3').show();
    $('#g4').hide();
  }
}

function down() {
    if ($('#g1').is(':visible')) {
    $('#g1').hide();
    $('#g2').show();
  }
    else if ($('#g2').is(':visible')) {
    $('#g2').hide();
    $('#g3').show();
  }
    else if ($('#g3').is(':visible')) {
    $('#g3').hide();
    $('#g4').show();
  }
}

Demo: http://jsfiddle.net/86GVE/2/

If you select the elements into a jQuery object, you can get less repetitive code, and you can easily add as many elements as you like:

var g = $('#g1,#g2,#g3,#g4');

function up() {
    for (var i = 1; i < g.length; i++) {
        if (g.eq(i).is(':visible')) {
            g.eq(i - 1).show();
            g.eq(i).hide();
            break;
        }
    }
}

function down() {
    for (var i = 0; i < g.length - 1; i++) {
        if (g.eq(i).is(':visible')) {
            g.eq(i + 1).show();
            g.eq(i).hide();
            break;
        }
    }
}

Demo: http://jsfiddle.net/86GVE/1/

If you use a class instead of id to locate the elements, you can even add elements without having to do any changes in the Javascript code. Just add the same class to all element that you want included, and select them. Example:

var g = $('.g');