How to show/hide images using javascript objects

Question

I have a html page showing pictures of different countries and 5 li elements with ids that represent 4 countries, the 5th li tag make all images to show. By clicking on one li tag (it represent curtain country) only the pictures of that country remains and the others disappear. But what i have to do is to make my javascript code with objects. I am extremely new to JS and I have no clue how to do it :(

Here is my JS code:

(function() {
    document.getElementById('all').addEventListener('click', showAll);
    document.getElementById('italy').addEventListener('click', showItaly);
    document.getElementById('france').addEventListener('click', showFrance);
    document.getElementById('croatia').addEventListener('click', showCroatia);
    document.getElementById('montenegro').addEventListener('click', showMontenegro);

    var italyCities = document.getElementsByClassName('italyCities');
    var franceCities = document.getElementsByClassName('franceCities');
    var croatiaCities = document.getElementsByClassName('croatiaCities');
    var montenegroCities = document.getElementsByClassName('montenegroCities');

    // onclick show all cities
    function showAll() {
        for (let i = 0; i < italyCities.length; i++) {
            italyCities[i].style.display = 'inline-block';
            franceCities[i].style.display = 'inline-block';
            croatiaCities[i].style.display = 'inline-block';
            montenegroCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only italian cities
    function showItaly() {
        for (let i = 0; i < italyCities.length; i++) {
            franceCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'none';
            italyCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only french cities
    function showFrance() {
        for (let i = 0; i < franceCities.length; i++) {
            italyCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'none';
            franceCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only croatian cities
    function showCroatia() {
        for (let i = 0; i < croatiaCities.length; i++) {
            italyCities[i].style.display = 'none';
            franceCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only montenegro cities
    function showMontenegro() {
        for (let i = 0; i < montenegroCities.length; i++) {
            italyCities[i].style.display = 'none';
            franceCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'inline-block';
        }
    }
})();

Answer 1

I think you're over-complicating things for yourself. Instead of having a function for each place that just changes the inline-style of the one you want to show and hides the rest you could do this all with one function...

If you were to use a general class for all of the cities, say .city you could toggle a hide/show class across all of them at once.

CSS

.hide {
    display:none;
}
.show {
    display:block;
}

JS

 $(document).ready(function() {   
            $(".city").addClass('hide'); 
            $("li:first-child").click(function() { 
               $(".city").removeClass('show'); 
               $(".city:nth-child(2)").addClass('show');
            });
            $("li:nth-child(2)").click(function() { 
              $(".city").removeClass('show'); 
              $(".city:nth-child(3)").addClass('show');
            });
            $("li:nth-child(3)").click(function() { 
              $(".city").removeClass('show'); 
              $(".city:nth-child(4)").addClass('show');
            });
            $("li:last-child").click(function() { 
              $(".city").addClass('show');        
           });
});

Update

For anyone who comes across this and isn't planning on using objects - here is a fiddle showing the principle of the question working.

https://jsfiddle.net/shzq8fd5/10/

Original Code Answer

CSS

.show {
     display:block;
 }
 .hide {
     display:none;
 }

Individual City Function:

$(document).ready(function() {  
      $(".city").addClass('hide');    
      $(".city").click(function() {
          $(".city").removeClass('show'); 
          $(this).addClass('show');
      });
});

Show all City Function

 $(document).ready(function() {       
      $(".city").click(function() {              
          $(".city").addClass('show');             
      });
});