//JQuery Javascript for Menu Sliding
$(document).ready(function() {
    //Hide countries on load
    $('body#photographs div#countries ol').hide();
    $('body#photographs div#countries ol#northamerica2').show();

    //Toggle countries when continent is clicked
    $('#africa').click(function(){
        $('#africa2').slideToggle("fast")});
    $('#asia').click(function(){
        $('#asia2').slideToggle("fast").toggleClass('clicked')});
    $('#europe').click(function(){
        $('#europe2').slideToggle("fast").toggleClass('clicked')});
    $('#middleeast').click(function(){
        $('#middleeast2').slideToggle("fast").toggleClass('clicked')});
    $('#northamerica').click(function(){
        $('#northamerica2').slideToggle("fast").toggleClass('clicked')});
    $('#oceania').click(function(){
        $('#oceania2').slideToggle("fast").toggleClass('clicked')});
    $('#southamerica').click(function(){
        $('#southamerica2').slideToggle("fast").toggleClass('clicked')});

    //Toggle Colors on click
    $('body#photographs div#continents ol li').click(function(){
        $(this).toggleClass('clicked');})
    $('body#photographs div#countries ol li').click(function(){
        $('body#photographs div#countries ol li.clicked').toggleClass('clicked');$(this).toggleClass('clicked');})

});