how to display an element only when a button is clicked (example: slidebar)

Question

I'm creating a small website for a school project, but I can't manage to make it so that when you click on a button in the sidebar it displays a "popup", for example here I want to make it so that when you click on the presentation button (the second one from the top), it displays the slideshow and that if you click on another one like the home button it doesn't display it. Can anyone help me?

 <script type="text/javascript"> var slides = document.querySelectorAll('.slide'); var btns = document.querySelectorAll('.btn'); let currentSlide = 1; // Javascript for image slider manual navigation var manualNav = function(manual){ slides.forEach((slide) => { slide.classList.remove('active'); btns.forEach((btn) => { btn.classList.remove('active'); }); }); slides[manual].classList.add('active'); btns[manual].classList.add('active'); } btns.forEach((btn, i) => { btn.addEventListener("click", () => { manualNav(i); currentSlide = i; }); }); </script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js" ></script> <script> let menuToggle = document.querySelector(".toggle"); let navigation = document.querySelector(".navigation"); menuToggle.onclick = function () { menuToggle.classList.toggle("active"); navigation.classList.toggle("active"); }; //ajoute une classe active dans la liste (tkt) let list = document.querySelectorAll(".list"); for (let i = 0; i < list.length; i++) { list[i].onclick = function () { let j = 0; while (j < list.length) { list[j++].className = "list"; } list[i].className = "list active"; }; } </script>

 :root { --blanc: #fff } @font-face { font-family: "font-1"; src: url(./assets/Metropolis-Medium.otf); } @font-face { font-family: "font-3"; src: url(./assets/Poppins-Light.ttf); } @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "font-2", sans-serif; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: #68cde9; }.logo { position: relative; font-size: 240%; text-transform: uppercase; cursor: pointer; left: 100px; }.showcase { position: absolute; right: 0; width: 100%; min-height: 100vh; padding: 100px; display: flex; justify-content: space-between; align-items: center; background: #111; color: #fff; z-index: 2; transition: 0.5s; }.showcase.active { right: 300px; }.showcase header { position: absolute; top: 0; left: 0; width: 100%; padding: 40px 100px; z-index: 1000; display: flex; align-items: center; justify-content: space-between; }.toggle { position: relative; width: 60px; height: 60px; background: url("images/menu.png"); background-repeat: no-repeat; background-size: 30px; background-position: center; cursor: pointer; }.toggle.active { position: relative; width: 60px; height: 60px; background: url("images/close.png"); background-repeat: no-repeat; background-size: 25px; background-position: center; }.showcase video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #81ddff; mix-blend-mode: overlay; }.text { position: relative; z-index: 10; left: 300px; font-size: 140%; }.text h2 { font-size: 5em; font-weight: 800; line-height: 1em; text-transform: uppercase; }.text h3 { font-size: 4em; font-weight: 700; line-height: 1em; text-transform: uppercase; }.text p { font-size: 1.1em; margin: 20px 0; font-weight: 400; max-width: 700px; }.social { position: absolute; bottom: 20px; z-index: 10; display: flex; justify-content: center; align-items: center; }.social li { list-style: none; }.social li a { display: inline-block; filter: invert(1); margin-right: 20px; transform: scale(0.5); transition: 0.5s; }.social li a:hover { transform: scale(0.5) translateY(-15px); }.navigation { position: fixed; top: 300px; left: 20px; bottom: 221px; width: 70px; border-radius: 20px; box-sizing: initial; border-left: 5px solid #fff; background: #fff; transition: width 0.5s; overflow-x: hidden; z-index: 100; font-family: "font-2"; }.navigation.active { width: 300px; }.navigation ul { position: absolute; top: 0; left: 0; width: 100%; padding-left: 5px; padding-top: 40px; }.navigation ul li { position: relative; list-style: none; width: 100%; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }.navigation ul li.active { background: #00c8ff; }.navigation ul li b:nth-child(1) { position: absolute; top: -20px; height: 20px; width: 100%; background: #00c8ff; display: none; }.navigation ul li b:nth-child(1)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-right-radius: 20px; background: #fff; }.navigation ul li b:nth-child(2) { position: absolute; bottom: -20px; height: 20px; width: 100%; background: #00c8ff; display: none; }.navigation ul li b:nth-child(2)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top-right-radius: 20px; background: #fff; }.navigation ul li.active b:nth-child(1), .navigation ul li.active b:nth-child(2) { display: block; }.navigation ul li a { position: relative; display: block; width: 100%; display: flex; text-decoration: none; color: #111; }.navigation ul li.active a { color: #fff; }.navigation ul li a.icon { position: relative; display: block; min-width: 60px; height: 60px; line-height: 70px; text-align: center; }.navigation ul li a.icon ion-icon { font-size: 1.5em; }.navigation ul li a.title { position: relative; display: block; padding-left: 10px; height: 60px; line-height: 60px; white-space: normal; }.toggle { position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; background: #fff; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 100; }.toggle.active { position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; background: #fff; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 100; }.toggle ion-icon { position: absolute; color: black; font-size: 34px; display: none; transition: 0.2s; }.toggle ion-icon.open, .toggle.active ion-icon.close { display: block; transition: 0.2s; }.toggle ion-icon.close, .toggle.active ion-icon.open { display: none; transition: 0.2s; }.img-slider{ position: relative; width: 800px; height: 500px; margin: 10px; background: transparent; z-index: 100; }.img-slider.slide{ z-index: 1; position: absolute; width: 100%; clip-path: circle(0% at 0 50%); }.img-slider.slide.active{ clip-path: circle(150% at 0 50%); transition: 2s; transition-property: clip-path; }.img-slider.slide img{ z-index: 1; width: 100%; border-radius: 5px; }.img-slider.slide.info{ position: absolute; top: 0; padding: 15px 30px; }.img-slider.slide.info h2{ color: #fff; font-size: 45px; text-transform: uppercase; font-weight: 800; letter-spacing: 2px; }.img-slider.slide.info p{ color: #fff; background: transparent; font-size: 16px; width: 60%; padding: 10px; border-radius: 4px; }.img-slider.navigation1{ position: absolute; display: flex; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; }.img-slider.navigation1.btn{ background: rgba(255, 255, 255, 0.5); width: 12px; height: 12px; margin: 10px; border-radius: 50%; cursor: pointer; }.img-slider.navigation1.btn.active{ background: #2696E9; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } @media (max-width: 820px){.img-slider{ width: 600px; height: 375px; }.img-slider.slide.info{ padding: 10px 25px; }.img-slider.slide.info h2{ font-size: 35px; }.img-slider.slide.info p{ width: 70%; font-size: 15px; }.img-slider.navigation1{ bottom: 25px; }.img-slider.navigation1.btn{ width: 10px; height: 10px; margin: 8px; } } @media (max-width: 620px){.img-slider{ width: 400px; height: 250px; }.img-slider.slide.info{ padding: 10px 20px; }.img-slider.slide.info h2{ font-size: 30px; }.img-slider.slide.info p{ width: 80%; font-size: 13px; }.img-slider.navigation1{ bottom: 15px; }.img-slider.navigation1.btn{ width: 8px; height: 8px; margin: 6px; } } @media (max-width: 420px){.img-slider{ width: 320px; height: 200px; }.img-slider.slide.info{ padding: 5px 10px; }.img-slider.slide.info h2{ font-size: 25px; }.img-slider.slide.info p{ width: 90%; font-size: 11px; }.img-slider.navigation1{ bottom: 10px; } }

 <,DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Accueil</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section class="showcase"> <header> <h2 class="logo">Feur</h2> <div class="toogle"></div> </header> <video src="videos/background.mp4" muted loop autoplay></video> <div class="overlay"></div> <div class="text"> <h2>Présentation</h2> <p> "Les plus beaux mots du monde ne sont que des sons inutiles si l'on ne peut pas les comprendre." -Lucien Tendret </p> </div> <ul class="social"> <li> <a href="#"><img src="images/facebook:png" alt="Facebook" /></a> </li> <li> <a href="https.//twitter.com/ERastronaute" ><img src="images/twitter.png" alt="Twitter" /></a> </li> <li> <a href="#"><img src="images/instagram.png" alt="Instagram" /></a> </li> </ul> </section> <div class="navigation"> <ul> <li class="list active"> <b></b> <b></b> <a href="#"> <span class="icon"><ion-icon name="home-outline"></ion-icon></span> <span class="title">Accueil</span> </a> </li> <li class="list"> <b></b> <b></b> <a href="#"> <span class="icon" ><ion-icon name="checkbox-outline"></ion-icon> </span> <span class="title">Objectifs</span> </a> </li> <li class="list"> <b></b> <b></b> <a href="#"> <span class="icon"> <ion-icon name="easel-outline"></ion-icon> </span> <span class="title">Présentation</span> </a> </li> <li class="list"> <b></b> <b></b> <a href="#"> <span class="icon"> <ion-icon name="card-outline"></ion-icon> </span> <span class="title">Références</span> </a> </li> <li class="list"> <b></b> <b></b> <a href="#"> <span class="icon"> <ion-icon name="bar-chart-outline"></ion-icon> </span> <span class="title">Statistiques</span> </a> </li> <li class="list"> <b></b> <b></b> <a href="#"> <span class="icon"> <ion-icon name="settings-outline"></ion-icon> </span> <span class="title">Paramètres</span> </a> </li> <li class="list"> <b></b> <b></b> <a href="#"> <span class="icon"> <ion-icon name="search-outline"></ion-icon> </span> <span class="title">Recherche</span> </a> </li> </ul> </div> <div class="toggle"> <ion-icon name="menu-outline" class="open"></ion-icon> <ion-icon name="close-outline" class="close"></ion-icon> </div> <div class="img-slider"> <div class="slide active"> <img src="images/1,jpg" alt=""> <div class="info"> <h2>Slide 01</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="slide"> <img src="images/2,jpg" alt=""> <div class="info"> <h2>Slide 02</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="slide"> <img src="images/3,jpg" alt=""> <div class="info"> <h2>Slide 03</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="slide"> <img src="images/4,jpg" alt=""> <div class="info"> <h2>Slide 04</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="slide"> <img src="images/5,jpg" alt=""> <div class="info"> <h2>Slide 05</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="navigation1"> <div class="btn active"></div> <div class="btn"></div> <div class="btn"></div> <div class="btn"></div> <div class="btn"></div> </div> </div> </body> </html>

so I want this:

the slide show in the correct position

how I don't want it to be

Answer 1

I'm pretty sure I've got the functionality you're looking for working. What I did was create a new function to call when clicking each navigation button to remove an inactive class from the selected element, and add an inactive class to each other navigable element. There is probably a better way to integrate this with your current 'onclick' function, but this was just my quick attempt. I'm only including my main changes here, but here's a link to a codepen with the rest of the code: https://codepen.io/jarellh94/pen/MWQyxVX

index.html:

...
<li class="list">
      <b></b>
      <b></b>
      <a href="#" onclick=toggleElement("img-slider")>
        <span class="icon">
          <ion-icon name="easel-outline"></ion-icon>
        </span>
        <span class="title">Présentation</span>
      </a>
    </li>
...
function toggleElement(elem) {
    let navigatableList = document.querySelectorAll(".navigatable")
    navigatableList.forEach(element => {
      if(element.classList.contains(elem)) {
        element.classList.remove("inactive")
      } else {
        element.classList.add("inactive")
      }
    })
  }

style.css:

...
.inactive {
    display: none;
  }

  .img-slider{
    position: absolute;
    width: 800px;
    height: 500px;
    left: 500px;
    top: 200px;
    margin: 10px;
    background-color: blue;
    z-index: 100;
  }