Imagen que se agranda al hacer clic

Bonjour à tous, je vous explique mon problème :

Je crée un site Web ; j'ai deux images affichées côte à côte (display: flex). Je veux que lorsque je clique sur l'une des deux images, l'autre disparaisse et l'image sur laquelle on a cliqué s'agrandisse.

Voilà la section du code HTML correspondant :

<section>

<div class="container">

<div class="flex">

<img src="IMG_20170908_110055.jpg" id="imageagrandir" class="image-presentation" alt="image de vitre"/>

<img src="IMG_20170908_110306.jpg" id="imageagrandir2" class="image-presentation" alt="image de vitre"/>

</div>
</div>

</section>

--------------------------------------------------------------------------------------------------

Voilà le code CSS correspondant :

.image-presentation {
margin: 5px;
}

#imageagrandir {
width: 50%;
display: block;
}

#imageagrandir2 {
width: 50%;
display: block;
}

--------------------------------------------------------------------------------------------------

Voilà le code JS :

var image = document.getElementById('imageagrandir');
var imageDeux = document.getElementById('imageagrandir2');

image.addEventListener('click', function() {
if (image.style.width == "50%" ) {
image.style.width = "100%";
imageDeux.style.display = "none";
} else
image.style.width = "50%";
imageDeux.style.display = "block";
});

image2.addEventListener('click', function() {
if (image2.style.width == "50%" ) {
image2.style.width = "100%";
image.style.display = "none";
} else
image2.style.width = "50%";
image.style.display = "block";
});

N'ayant que quelques bases en JS, vous comprendrez pourquoi je n'ai pas fait de fonction (ce qui aurait été plus simple je pense), car je ne sais pas en faire...

Je pense aussi que la technique employée est assez mauvaise, car je joue juste avec le CSS...

Merci d'essayer de le faire de cette façon si possible, et de bien vouloir m'expliquer ce que vous faites :)

Merci par avance :)