How can I display/hide divs when corresponding images are clicked? (vanilla JS)

I’ve been teaching myself some coding basics by creating a spoof social media site with HTML/CSS and vanilla Javascript. Currently, I’m trying to toggle post descriptions when post images are clicked.

I’ve cobbled together an ugly and janky (but working!) list of functions with if/else statements. It’s REALLY horrible; I know there are much cleaner solutions using arrays and for loops. I’d like to find out how to store my post descriptions and post images in two const variables (as nodelists, then turn them into arrays?), then use a loop to toggle the correct post description to “display: block” when its corresponding image is clicked.

As it stands, my code functions, but extremely poorly. Here is the fiddle: https://jsfiddle.net/x9abz658/3/#&togetherjs=hFzS5u7I9y

And here is the first function as an example:

function showPostOne() {
    var a = document.getElementById("postone");
    var b = document.getElementById("posttwo");
    var c = document.getElementById("postthree");
    var d = document.getElementById("postfour");
    var e = document.getElementById("postfive");
    var f = document.getElementById("postsix");
    var g = document.getElementById("postseven");

    if (a.style.display === "none")
         {a.style.display = "block";}

    else {
        a.style.display = "none";
    }

    if (b.style.display === "block")
        {b.style.display = "none";}

    if (c.style.display === "block")
        {c.style.display = "none";}

    if (d.style.display === "block")
        {d.style.display = "none";}

    if (e.style.display === "block")
        {e.style.display = "none";}

    if (f.style.display === "block")
        {f.style.display = "none";}

    if (g.style.display === "block")
        {g.style.display = "none";}
    }

Every image activates a function onclick, which displays its specific description by manually setting every other description to display: none. Like I said, horrible.

Currently, I’m using document.getElementById to assign a unique variable to every post, then specifically designating which post to display while hiding the others. I’ve tried to make the variables global by using const and moving them out of the functions, but everything stops working. Not only is the code janky, but I have to declare the same variables inside each function.

I’ve scoured the web for solutions using loops and nodelists/arrays, such as this one:

const pics = document.getElementsByClassName("pix");
const posts = document.getElementsByClassName("post");

for (let ii = 0; ii < pics.length; ii++) {
    pics[ii].addEventListener("click", function() {
    
        for (let aa = 0; aa < posts.length; aa++) {
            posts[aa].style.display = "none";
        }
        posts[ii].style.display = "block";
    });
}

I’m getting more familiar with for loops, and I broadly understand this code, but it doesn’t work with the HTML/CSS that I already have; the variable and class names are correct, as far as I’m aware. The “pix” class has only been assigned to <img> elements; I tried to enclose each image in a div and assign those to the variable “pics”, thinking that might help, but it only made things worse.

Any advice is appreciated.