Image qui s'agrandit au click

Bonjour a tous je vous explique mon problème:

Je créer un site Web; j'ai deux image affiché côte à côte (display: flex). Je veux que lorsque je click sur une des deux images, l'autre disparaisse, et l'image du click 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 base 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 ma technique employé est assez mauvaise, car je joue que avec le CSS...

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

Merci par avance :)