Toogle between divs content by clicking on side list menu

I am trying to change div’s content by clicking on side menu without reloading page,just to slide or fade in.

<div class="albcont">
          <div class="albmenu">
            <ul>
              <li><a href="#gallery">Family</a></li>
              <li><a href="#gallery">Weddings</a></li>
              <li><a href="#gallery">Business</a></li>
              <li><a href="#gallery">Sports</a></li>
              <li<a href="gallery.html">Full Gallery</a></li>
            </ul>
          </div>
          <div class="gallery-chng">

            <div class="grid">
              <div class="slika1 sl"><a href="gallery-family.html"><img src="img1.jpg" alt=""></a></div>
              <div class="slika2 sl"><a href="gallery-family.html"><img src="img2.jpg" alt=""></a></div>
              <div class="slika3 sl"><a href="gallery-family.html"><img src="img3.jpg" alt=""></a></div>
              <div class="slika4 sl"><a href="gallery-family.html"><img src="img4.jpg" alt=""></a></div>
            </div>
          
            *<div class="grid2">
              <div class="slika1 sl"><a href="gallery-weddings.html"><img src="img1-1.jpg" alt=""></a></div>
              <div class="slika2 sl"><a href="gallery-weddings.html"><img src="img2-2.jpg" alt=""></a></div>
              <div class="slika3 sl"><a href="gallery-weddings.html"><img src="img3-3.jpg" alt=""></a></div>
              <div class="slika4 sl"><a href="gallery-weddings.html"><img src="img4-4.jpg" alt=""></a></div>
            </div>*
        </div>
     </div>

CSS:

.gallery-chng {
  width: 75%;
  height: 90%;
}

div.grid {
  width: 75%;
  height: 80%;
  display: grid;
  position: absolute;
  padding: 15px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 3%;
  column-gap: 3%;
  opacity: 0;
}
div.grid2 {
  width: 75%;
  height: 80%;
  display: grid;
  padding: 15px;
  position: absolute;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 3%;
  column-gap: 3%;
  opacity: 0;
}

.sl {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 1s;
  color: black;
}
.sl a:hover:after {
  content: "Full Gallery";
  height: 100%;
  width: 100%;
  background-color: rgba(105, 95, 95, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  transition: all 5s ease;
}

So what my point is, when i click on “weddings” for example in menu, i want to div with class=”grid” disapere, and div with class=”grid2″ apeear in .gallery-chng div… “grid3” for Business….etc etc

I am new at coding so any advice is helpful. I assume that it can be done by toogling div’s display property and that javascript should be inculded but i dont know how to do it… HELP ! 🙂

Answer

I have gotten an animation working just using plain html, css, and javascript.

toggle.html

<!-- Link to stylesheet which belongs in head element -->
<head>
  <link rel="stylesheet" href="toggle.css">
</head>
<div class="albcont">
  <div class="albmenu">
    <ul id="gallery-links">
      <!-- Add a data gallery attribute so we know which gallery the link corresponds to -->
      <li><a href="#gallery" data-gallery="grid1">Family</a></li>
      <li><a href="#gallery" data-gallery="grid2">Weddings</a></li>
    </ul>
  </div>
  <div class="gallery-chng">
    <!-- Add class of current to div being shown so we can access it with javascript -->
    <div class="grid1 current">
      <!-- Images are from placeholder.com -->
      <div class="slika1 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
      <div class="slika2 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
      <div class="slika3 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
      <div class="slika4 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Family" alt=""></a></div>
    </div>
  
    <div class="grid2">
      <div class="slika1 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
      <div class="slika2 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
      <div class="slika3 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
      <div class="slika4 sl"><a href="gallery.html"><img src="https://via.placeholder.com/150?text=Weddings" alt=""></a></div>
    </div>
  </div>
</div>
<!-- Link to JavaScript -->
<script src="toggle.js"></script>

toggle.css

/* set all div elements with a class that starts with 'grid' to have 0 opacity */
/* use position absolute so they are all in the same place on the page */

div[class^="grid"] {
  display: flex;
  position: absolute;
  top: 50px;
  left: 10px;
  opacity: 0;
}

/* create animation for div elements with class of current using keyframes */

div.current {
  animation: FadeIn linear 1s 1 forwards;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

toggle.js

// Listen for when the DOM has finished loading
window.addEventListener('DOMContentLoaded', () => {

  // Add event listener to the element containing the links by selecting its id
  // This works because of event bubbling
  document.querySelector('#gallery-links').addEventListener('click', (event) => {

    // Check if the clicked element is an anchor tag.
    // We don't want anything to happen if the ul container is clicked
    if (event.target.tagName === 'A') {

      // Find the element with a class of current and remove it
      // Because of the CSS this will cause the element to disappear
      document.querySelector('.current').classList.remove('current');

      // Get the name of the gallery from the data-gallery attribute
      let galleryName = event.target.getAttribute('data-gallery');

      // Select the correct element and add a class of current
      document.querySelector(`.${galleryName}`).classList.add('current');
    }
  });
});

I included comments in the code to explain how it all works together. You can play around with css keyframes and animation to get the animation exactly how you want it, but this should help you get started. The jQuery library also provides an easy way to create animations if you want to try that. Here are some links you might find useful. Let me know if you have any questions.

Keyframes

Animations

Event Listeners

jQuery