Toggling Post Descriptions

HTML

<div id="profbody" style="background-image: linear-gradient(red, yellow)">
      <div id="profileposts">
        <div id="postone" class="post">
          This is this user's very first post! I wonder what it will say...
        </div>
        <div id="posttwo" class="post">
          This is this user's next post! How cool is that??
        </div>
        <div id="postthree" class="post">
          Three whole posts? This character must have a lot on their mind.
        </div>
        <div id="postfour" class="post">
          A fourth post - this is a new record!
        </div>
        <div id="postfive" class="post">
          They said a fifth post was impossible....
        </div>
        <div id="postsix" class="post">A sixth post - it can't be...</div>
        <div id="postseven" class="post">The seventh and ultimate post!!!!</div>
      </div>

      <div id="pictures">
        <div class="photo">
          <img
            onclick="showPostOne()"
            class="pix"
            id="pixone"
            src="../images/maristudio_scaled.png"
          />
        </div>
        <div class="photo">
          <img
            onclick="showPostTwo()"
            class="pix"
            id="pixtwo"
            src="../images/blankpost.png"
          />
        </div>
        <div class="photo">
          <img
            onclick="showPostThree()"
            id="pixthree"
            class="pix"
            src="../images/blankpost.png"
          />
        </div>
        <div class="photo">
          <img
            onclick="showPostFour()"
            id="pixfour"
            class="pix"
            src="../images/blankpost.png"
          />
        </div>
        <div class="photo">
          <img
            onclick="showPostFive()"
            id="pixfive"
            class="pix"
            src="../images/blankpost.png"
          />
        </div>
        <div class="photo">
          <img
            onclick="showPostSix()"
            id="pixsix"
  ...

CSS

#profbody {
  max-width: 906px;
  margin-bottom: 10px;
  max-height: 850px;
  background-color: rgb(255, 255, 255, 0.4);
  margin: auto;
  display: flex;
}

#profileposts {
  width: 550px;
  height: 850px;
  margin: auto;
  display: inline-block;
  padding: 2em;
}

.post {
  font-size: 24px;
  font-family: "dpcomic";
  color: white;
  padding-top: 10px;
  padding-left: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  display: none;
}

#pictures {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 300px;
  flex: 1;
  overflow-y: auto;
}

.pix {
  position: relative;
  width: 250px;
  height: 250px;
  padding: 25px 25px 0 25px;
  margin-bottom: 1.5em;
  flex: 1;
}

JavaScript

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";}


    }


    function showPostTwo() {
        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 (b.style.display === "none")
             {b.style.display = "block";}
    else {
            b.style.display = "none";
        }
        
        if (a.style.display === "block")
            {a.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";}


      ...