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

[tracy]

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 \[code\]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(); }}\[/code\]