Html
- Phase 1: Information
- Phase 2: Planning
- Phase 3: Design
- Phase 4: Development
- Phase 5: Finalizing
- Phase 6: Maintenance
This is the function I have right now in javascript
function designProcess(){
var index = $('#phases li');
hideAll();
$('#phases li').each(function(i){
$(this).click(function(){
alert('Phase position: ' + index.index(this) )
if( i == index.index(this) ){
$('#' + index.index(this)).show();
}else{
$('#' + index.index(this)).hide();
}
});//ends click function
});//ends each function
};//ends designProcess
Goal: When I click phase 1, I want the appropriate div to be shown. When I click phase 2, it hides the current one and shows phase 2.
Basically, When i click the given list item, the correct div gets revealed which is good. When I keep clicking the list items, the hidden divs keep showing but not hiding. I don’t see why the line of code inside the else statement doesn’t work.
Can anyone help me figure out why lol? It would be much appreciated!
