How to toggle HTML element using Javascript

See more:

Javascript

HTML

Hello guys, i am currently developing a website and currently im stuck at this code

<div>
                                <img id="tile" src="tilehead1.png"/><br>
                                <img id="hidden2" style="visibility: hidden" src="hide1.png"/><br>
                                <img  önclick="swapImage()" id="readMore" src="ReadMore.jpg"/><img src=".neighbour.png"/><br>
                                <img id="img" src="image1.png"/>
                                </br></br></br>
                                
                            </div>

the above html code is for displating the read more functionality using images, the image for id of"hidden2" is initially hidden but when the user clicks on the image for id "readMore" it switches its "src" attribute value to another image for "done" functionality. the problem is, when the image for id of "hidden 2" is hidden it leaves a huge gap between other images because of the
element before it, i want to be able to add the br element along with the image when a user clicks "readMore"

here is my javaScript code

<script language="Javascript" type="text/javascript">
intImage = 2;
function swapImage() {
switch (intImage) {
 case 1:
   readMore.src = "ReadMore.jpg"
   document.getElementById('hidden2').style.visibility= "hidden";
   intImage = 2
   return(true);
   
   

   
   
case 2:
   readMore.src = "done.png"
   document.getElementById('hidden2').style.visibility= "visible";
   intImage = 1
   return(false);
 }
}
</script>

help me to add the functionality of toggling the
element along with the image that it contains (hidden2), i tried but i failed

Thank you