Return to Answer

Below is my take on your code:

The added comments explain my take on your code:

// Maybe rename this to something more intuitive
// This will allow you to add unlimited click combinations without additional logic
// This is the main piece which will help in avoiding redundancy
var list = [
    { // index 0
        family:'director',
        expertise:'asset'
    },
    { // index 1
        family:'consultant',
        expertise:'insurance'
    },
    { // index 2
        family:'support',
        expertise:'wealth'
    }
];

var family_index = 0;
var expertise_index = 0;

// Don't pollute the global space with functions
var showConsultant = function(){ 
    
    // Take advantage of the callback parameter of the fadeOut() function to guarantee the proper execution order
    // because .delay(101) might not fire off precisely when precisely after fadeOut() has finished
    $('.profile').stop(true,true).fadeOut(100, function(){
        
        // Call upon your list and the presently set indexes to figure out what to fadein()
        $('.profile[data-family="'+list[family_index].family+'"][data-expertise="'+list[expertise_index].expertise+'"]').fadeIn();
    });
};

showConsultant();

// Listen for clicks in either level and use .hasClass() to determine which level we are dealing with
$('.top-level li, .second-level li').on('click', function() {
    
    // $(this) is needed several times so just cache it
    var $this = $(this);
    var index = $this.index();
    var level = ($this.hasClass('top-level') ? 'top' : 'second');
    
    // Dynamically target the level
    $('.'+level+'-level li').removeClass('selected');
    $this.addClass('selected');
    
    // Make sure that what the user clicked is a defined choice in your list variable
    if( index < list.length ){
        
        if(level === 'top'){
            family_index = index;
        } else {
            expertise_index = index;
        }
        
        showConsultant();
    }

});

// Maybe rename this to something more intuitive
// This will allow you to add unlimited click combinations without additional logic
// This is the main piece which will help in avoiding redundancy
var list = [
    { // index 0
        family:'director',
        expertise:'asset'
    },
    { // index 1
        family:'consultant',
        expertise:'insurance'
    },
    { // index 2
        family:'support',
        expertise:'wealth'
    }
];

var family_index = 0;
var expertise_index = 0;

// Don't pollute the global space with functions
var showConsultant = function(){ 
    
    // Take advantage of the callback parameter of the fadeOut() function to guarantee the proper execution order
    // because .delay(101) might not fire off precisely after fadeOut() has finished
    $('.profile').stop(true,true).fadeOut(100, function(){
        
        // Call upon your list and the presently set indexes to figure out what to fadein()
        $('.profile[data-family="'+list[family_index].family+'"][data-expertise="'+list[expertise_index].expertise+'"]').fadeIn();
    });
};

showConsultant();

// Listen for clicks in either level and use .hasClass() to determine which level we are dealing with
$('.top-level li, .second-level li').on('click', function() {
    
    // $(this) is needed several times so just cache it
    var $this = $(this);
    var index = $this.index();
    var level = ($this.hasClass('top-level') ? 'top' : 'second');
    
    // Dynamically target the level
    $('.'+level+'-level li').removeClass('selected');
    $this.addClass('selected');
    
    // Make sure that what the user clicked is a defined choice in your list variable
    if( index < list.length ){
        
        if(level === 'top'){
            family_index = index;
        } else {
            expertise_index = index;
        }
        
        showConsultant();
    }

});

// Maybe rename this to something more intuitive
// This will allow you to add unlimited click combinations without additional logic
var list = [
    { // index 0
        family:'director',
        expertise:'asset'
    },
    { // index 1
        family:'consultant',
        expertise:'insurance'
    },
    { // index 2
        family:'support',
        expertise:'wealth'
    }
];

var family_index = 0;
var expertise_index = 0;

// Don't pollute the global space with functions
var showConsultant = function(){ 
    
    // Take advantage of the callback parameter of the fadeOut() function to guarantee the proper execution order
    // because .delay(101) might not fire off precisely when precisely after fadeOut() has finished
    $('.profile').stop(true,true).fadeOut(100, function(){
        $('.profile[data-family="'+list[family_index].family+'"][data-expertise="'+list[expertise_index].expertise+'"]').fadeIn();
    });
};

showConsultant();

// Listen for clicks in either level and use .hasClass() to determine which level we are dealing with
$('.top-level li, .second-level li').on('click', function() {
    
    // $(this) is needed several times so just cache it
    var $this = $(this);
    var index = $this.index();
    var level = ($this.hasClass('top-level') ? 'top' : 'second');
    
    // Dynamically target the level
    $('.'+level+'-level li').removeClass('selected');
    $this.addClass('selected');
    
    // Make sure that what the user clicked is a defined choice in your list variable
    if( index < list.length ){
        
        switch(level){
            case 'top':
                family_index = index;
                break;
            case 'second':
                expertise_index = index;
                break;
        }
        
        showConsultant();
    }

});

// Maybe rename this to something more intuitive
// This will allow you to add unlimited click combinations without additional logic
// This is the main piece which will help in avoiding redundancy
var list = [
    { // index 0
        family:'director',
        expertise:'asset'
    },
    { // index 1
        family:'consultant',
        expertise:'insurance'
    },
    { // index 2
        family:'support',
        expertise:'wealth'
    }
];

var family_index = 0;
var expertise_index = 0;

// Don't pollute the global space with functions
var showConsultant = function(){ 
    
    // Take advantage of the callback parameter of the fadeOut() function to guarantee the proper execution order
    // because .delay(101) might not fire off precisely when precisely after fadeOut() has finished
    $('.profile').stop(true,true).fadeOut(100, function(){
        
        // Call upon your list and the presently set indexes to figure out what to fadein()
        $('.profile[data-family="'+list[family_index].family+'"][data-expertise="'+list[expertise_index].expertise+'"]').fadeIn();
    });
};

showConsultant();

// Listen for clicks in either level and use .hasClass() to determine which level we are dealing with
$('.top-level li, .second-level li').on('click', function() {
    
    // $(this) is needed several times so just cache it
    var $this = $(this);
    var index = $this.index();
    var level = ($this.hasClass('top-level') ? 'top' : 'second');
    
    // Dynamically target the level
    $('.'+level+'-level li').removeClass('selected');
    $this.addClass('selected');
    
    // Make sure that what the user clicked is a defined choice in your list variable
    if( index < list.length ){
        
        if(level === 'top'){
            family_index = index;
        } else {
            expertise_index = index;
        }
        
        showConsultant();
    }

});