Switching between sections using CSS or JS

[tiotolstoy]

Hello, I am having trouble and this is the most welcoming community to a beginner in programming.

When the user clicks a section of text in the below diagram, I would like for a different image to show for each section of text.

I have tried several solutions that have not worked (like this https://stackoverflow.com/questions/19251340/onclick-show-div-but-hide-when-other-one-is-clicked). The example used jQuery, which I could not translate to Vanilla JS. I would also like to use classes, rather than ID, so as to have reusable code.

Any suggestions or pointers in the correct direction are very appreciated

[FatmaNagori]

If you want to change image according to click you can use following code :

<div>
     <div onclick="click("1.jpg")">1</div>
     <div onclick="click("2.jpg")">2</div>
     <div onclick="click("3.jpg")">3</div>
</div>
<img id="image" src="1.jpg" alt="image">
<script>
     function click(src){
          document.getElementById('image').setAttribute("src",src);
     } 
</script>

[pjonp]

@FatmaNagori this is a correct response, but there are some errors in the code as posted.

OP can debug it and get the final answer