Switching between sections using CSS or JS

Hello, this may not be a purely Elixir question but 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 :slight_smile:

1 Like

I’d probably just use invisible radio buttons with the text being in the label for it, then based on the radio button selected via it’s ID then show an image and hide the others. It can all be done in pure CSS, no javascript needed, and it will work everywhere.

1 Like

Here’s an example of what @OvermindDL1 suggested, just because I love solving this kind of problems in CSS/HTML. JavaScript could enhance this, but using HTML/CSS only, it’s easy enough to make it accessible.


@Letmecode Thanks for the link! I was short on time yesterday so couldn’t make up an example myself but hoped I prodded someone else to. ^.^

1 Like