Displaying image for the selected year I have the following code and I'm trying to find a cleaner way to run the year functions. At the moment I have 5 years as divs with an onclick event to bring the appropriate year image into view. So if you click on 1950, the 1950 year image will appear. If you then click on 1960, the 1950 image will disappear and the 1960 image will appear and so on.

In order to make sure that only the year image I want to see appears I have coded each function to remove every other years' image but this is going to lead to massive bloat as I want to be able to increase my 5 years to 20 and up.

Is there a way such as using a loop to work something like:
"If I click on 1950 then hide anything other 1950 and just show 1950"
rather than what I have now which is 
"If I click on 1950, then hide 1960 image, hide 1970 image, hide 1980 image... and show 1950 image"



&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;base href="http://dtwdev.co.uk/new/"&gt;
&lt;title&gt;Year test&lt;/title&gt;


&lt;script&gt;
&lt;!-- Function to bring image onto screen --&gt;
function slideInYear(el){
 var elem = document.getElementById(el);
 elem.style.transition = "left 0.5s linear 0s";
 elem.style.left = "50px";
}

&lt;!-- Function to send image back off screen --&gt;
function slideOutYear(el){
 var elem = document.getElementById(el);
 elem.style.transition = "left 0.5s linear 0s";
 elem.style.left = "-500px";
}

&lt;!-- 1950 function brings 1950 image on screen and makes sure all others are sent off --&gt;
function year1950() {
 slideInYear('year_1950'),
 slideOutYear('year_1960'),
 slideOutYear('year_1970'),
 slideOutYear('year_1980'),
 slideOutYear('year_1990')
}

&lt;!-- 1960 function brings 1960 image on screen and makes sure all others are sent off --&gt;
function year1960() {
 slideInYear('year_1960'),
 slideOutYear('year_1950'),
 slideOutYear('year_1970'),
 slideOutYear('year_1980'),
 slideOutYear('year_1990')
}

function year1970() {
 slideInYear('year_1970'),
 slideOutYear('year_1960'),
 slideOutYear('year_1950'),
 slideOutYear('year_1980'),
 slideOutYear('year_1990')
}

function year1980() {
 slideInYear('year_1980'),
 slideOutYear('year_1960'),
 slideOutYear('year_1970'),
 slideOutYear('year_1950'),
 slideOutYear('year_1990')
}

function year1990() {
 slideInYear('year_1990'),
 slideOutYear('year_1960'),
 slideOutYear('year_1970'),
 slideOutYear('year_1980'),
 slideOutYear('year_1950')
}


&lt;/script&gt;

&lt;style&gt;
/*This code makes sure the five images are held off screen until needed */
div#year_1950 {position:absolute;top:0px;left:-500px;}
div#year_1960 {position:absolute;top:0px;left:-500px;}
div#year_1970 {position:absolute;top:0px;left:-500px;}
div#year_1980 {position:absolute;top:0px;left:-500px;}
div#year_1990 {position:absolute;top:0px;left:-500px;}



&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;!-- These five divs are hidden off the left of the screen --&gt;
&lt;div id="year_1950"&gt;&lt;img src="bg_1950.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1960"&gt;&lt;img src="bg_1960.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1970"&gt;&lt;img src="bg_1970.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1980"&gt;&lt;img src="bg_1980.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1990"&gt;&lt;img src="bg_1990.jpg"&gt;&lt;/div&gt;

&lt;!-- These five divs have the dates that the user clicks to bring the image on screen --&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="year1950()"&gt;1950&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="year1960()"&gt;1960&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="year1970()"&gt;1970&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="year1980()"&gt;1980&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="year1990()"&gt;1990&lt;/a&gt;&lt;/div&gt;


&lt;script src="http://www.dtwdev.co.uk/new/js/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script src='http://www.dtwdev.co.uk/new/js/css3-animate-it.js'&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Create a style for the classes hidden_year and visible_year. When you click a link use a selector that selects all with id containing "year_19" and set them all to hidden_year, then just set the link you clicked to visible_year.

You could use a loop to build up the id values 5-9 if you really wanted to. . . var curr_year = 'year_19' + i + '0' in a loop.

Here is an example:

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Year test&lt;/title&gt;

&lt;style&gt;
.hidden_year {
    transition: left 0.5s linear 0s;
    position:absolute;
    top:0px;
    left:-500px;

}

.visible_year {
    transition: left 0.5s linear 0s;
    position:absolute;
    top:0px;
    left:50px;
}

&lt;/style&gt;
&lt;script&gt;

function process(id) {
$('[id*="year_19"]').each(function(index) {
        $(this).removeClass().addClass('hidden_year');
    });
$('[id=' + id + ']').removeClass().addClass('visible_year');
}


&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="year_1950" class="hidden_year"&gt;&lt;img src="http://dtwdev.co.uk/new/bg_1950.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1960" class="hidden_year"&gt;&lt;img src="http://dtwdev.co.uk/new/bg_1960.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1970" class="hidden_year"&gt;&lt;img src="http://dtwdev.co.uk/new/bg_1970.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1980" class="hidden_year"&gt;&lt;img src="http://dtwdev.co.uk/new/bg_1980.jpg"&gt;&lt;/div&gt;
&lt;div id="year_1990" class="hidden_year"&gt;&lt;img src="http://dtwdev.co.uk/new/bg_1990.jpg"&gt;&lt;/div&gt;


&lt;div&gt;&lt;a href="javascript:void(0);" onclick="process('year_1950')"&gt;1950&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="process('year_1960')"&gt;1960&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="process('year_1970')"&gt;1970&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="process('year_1980')"&gt;1980&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;a href="javascript:void(0);" onclick="process('year_1990')"&gt;1990&lt;/a&gt;&lt;/div&gt;





&lt;script src="http://dtwdev.co.uk/new//js/jquery.min.js"&gt;&lt;/script&gt;   
&lt;script src='http://dtwdev.co.uk/new//js/css3-animate-it.js'&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;