6.5. Dynamic Feature Section

<html>

<head>
  <style>
    .linefeat {
      border-bottom: 2px solid #3d50f4;
    }
  </style>

  <script>

    window.addEventListener("load", loadingfeat, true);


    function loadingfeat() {
      var firstcontainer = document.getElementById("firstcontainer");
      var secondcontainer = document.getElementById("secondcontainer");
      var thirdcontainer = document.getElementById("thirdcontainer");

      var linkfirstcontainer = document.getElementById("linkfirstcontainer");
      var linksecondcontainer = document.getElementById("linksecondcontainer");
      var linkthirdcontainer = document.getElementById("linkthirdcontainer");

      firstcontainer.style.display = "block";
      secondcontainer.style.display = "none";
      thirdcontainer.style.display = "none";
      linkfirstcontainer.classList.add("linefeat");
    }

    function showfirstcontainer() {
      firstcontainer.style.display = "block";
      secondcontainer.style.display = "none";
      thirdcontainer.style.display = "none";

      linkfirstcontainer.classList.add("linefeat");
      linksecondcontainer.classList.remove("linefeat");
      linkthirdcontainer.classList.remove("linefeat");

    }

    function showsecondcontainer() {
      firstcontainer.style.display = "none";
      secondcontainer.style.display = "block";
      thirdcontainer.style.display = "none";


      linkfirstcontainer.classList.remove("linefeat");
      linksecondcontainer.classList.add("linefeat");
      linkthirdcontainer.classList.remove("linefeat");

    }

    function showthirdcontainer() {
      firstcontainer.style.display = "none";
      secondcontainer.style.display = "none";
      thirdcontainer.style.display = "block";


      linkfirstcontainer.classList.remove("linefeat");
      linksecondcontainer.classList.remove("linefeat");
      linkthirdcontainer.classList.add("linefeat");

    }

  </script>
</head>

</html>