Dropdown button doesnt work on the first press

I am making a website for trains and I made a dropdown button for a button that when clicked displays all the trains on the website but for some reason on my tablet version the button just doesn’t work the first time its pressed but after that it’s ok. It’s really weird issue and I just don’t know what to do. I have absolutely no experience in JS and I have no time to learn it for this project but I really want to use it. On this image you can see that first is detected that the menu button that displays the navigation bar and then when I press the train-dropdown button it is being detected but still doesn’t fire the function

function TrainDropdown() { 
  const trainMenu = document.getElementById("trains");
  trainMenu.classList.toggle("show");
  console.log("TrainDropdown toggled:", trainMenu.classList.contains("show"));
}

  function Menu() {
    const navBar = document.getElementById("phone-nav-bar");
    navBar.classList.toggle("show-nav-bar");
}
function MobileTrainDropdown() {
  const trainElements = document.getElementById("tablet-trains");
  if (trainElements.style.display === "none") {
      trainElements.style.display = "flex";
  } else {
      trainElements.style.display = "none";
  }
}

window.addEventListener("click", function (event) {
  console.log("Window click detected on:", event.target);

  // Close train dropdown if clicked outside the dropdown button
  if (!event.target.closest('.dropdown-button')) {
    const dropdowns = document.getElementsByClassName("train-elements");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
        console.log("Closed train dropdown:", openDropdown);
      }
    }
  }

  // Close mobile nav menu if clicked outside menu button and nav bar
  const navBar = document.getElementById("phone-nav-bar");
  const menuButton = document.querySelector('.menu-button');
  if (navBar && menuButton && !menuButton.contains(event.target) && !navBar.contains(event.target)) {
    navBar.classList.remove("show-nav-bar");
    console.log("Closed mobile nav menu.");
  }
});

body {
    margin: 0;
}

/*top-bar properties*/
.top-bar {
    display: flex;
    align-items: center;
    height: 10vh;
    background-color: #A7C4FF;
}

.branding {
    display: flex;
    align-items: center;
}

.branding img {
    height: 12vh; /* Set a fixed height for the logo */
    width: auto; /* Maintain aspect ratio */
}

/*menu toggle properties*/
.menu-button {
    display: none; /* Hidden on larger screens */
}

.mobile-phone-branding {
    display: none; /* Hidden on larger screens */
}
/*navigation bar properties*/
.nav-bar {
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: 10vw;
}

/*buttons*/
.nav-button, .dropdown-button{
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    margin-right: 5px;
    font-family: Unbounded;   
    font-size: 1vw; 
    text-align: center;
    text-decoration: none;
    background-color: #A7C4FF;
    border: none;
    border-radius: 40px;
    transition: background-color 0.4s ease-in-out;
}

.nav-button:hover, .dropdown-button:hover{
    background-color: #8FA9FF;
}

/*train-dropdown and all its children properties*/
.train-dropdown{
    position: relative;
    margin-right: 5px;
    width: 100%;
}

.train-elements{
    display: none;
    width: 100%;
    position: absolute;
    top: 10vh;
    background-color: #7f9dfd;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 0.8vw;
    z-index: 1;
}

.train-elements a{
    padding: 1em;
    color: black;
    text-decoration: none;
}

.train-elements a:hover{
    background-color: #567dff;
}

.train-elements #first-element:hover{
    border-top-left-radius: 0.8vw;
    border-top-right-radius: 0.8vw;
}

.train-elements #last-element:hover{
    border-bottom-left-radius: 0.8vw;
    border-bottom-right-radius: 0.8vw;
}

#mobile-phone-train-button{
    display: none;
}

/*Class that JS uses to show train-elements*/
.show{
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 1300px){
    /*hiding nav-bar to save space and make it into a dropdown*/
    .nav-bar{
        display: none;
    }

    .menu-button{
        display: flex;
        height: 8.5vh;
        width: 8.5vh;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        border: none;
        background-color: #A7C4FF;
    }

    .menu-button img {
        width: 3vw; /* Set a fixed width */
        height: auto; /* Maintain aspect ratio */
        max-width: none; /* Prevent scaling */
    }

    .menu-button:hover{
        background-color: #8FA9FF;
    }

    /*button properties*/
    .nav-button, .dropdown-button{
        border-radius: 0;
        background-color: #94b7ff;
    }

    .mobile-phone-nav-bar{
        box-shadow: 8px 16px 16px 0px rgba(0,0,0,0.2);
        background-color: #A7C4FF;
        width: 300px;
        position: absolute; /* Position below the top bar */
        top: 10vh; /* Position below the top bar */
        left: 0; /* Align to the left */
        width: 300px; /* Full width */
        display: none; /* Hidden by default */
    }
    
    /*train dropdown properties*/
    .tablet-train-elements{
        display: none;
        width: 100%;
        flex-direction: column;
        position: absolute;
        background-color: #7f9dfd;
    }
    
    .tablet-train-elements a{
        padding: 12px 16px;
        color: black;
        text-decoration: none;
    }

    .tablet-train-elements a:hover{
        background-color: #567dff;
    }
    
    /*hides the button i will be using for phone mode that
    substitutes the dropdown button cause there is no space*/
    #mobile-phone-train-button{
        display: none;
    }

    /*a class JS uses to display the dropdown when pressing the button*/
    .show-nav-bar{
        display: flex;
        flex-direction: column;
    }
}

<!DOCTYPE html>
<html lang="bg">
<head>
    
    <!--meta data-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--tab view-->
    <title>Железопътна страст</title>
    <link rel="icon" href="assets/images/favicon.png">

    <!--css files-->
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="topbar/topbar.css">

    <!--google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap" rel="stylesheet">

</head>
<script src="topbar/topbar.js" defer></script>
<body>    
    <!--the top bar-->
    <div class="top-bar">
        <div class="mobile-phone-branding">

            <a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>

        </div>
        <div class="menu-toggle">

            <button class="menu-button" onclick="Menu()"><img src="assets/images/menu.png"></button>
            
            <div class="mobile-phone-nav-bar" id="phone-nav-bar">

                <a class="nav-button" href="index.html">Начало</a>

                <a class="nav-button" id="mobile-phone-train-button" href="#trains">Влакове</a>
                
                <div class="tablet-train-dropdown">
                    
                    <button onclick="MobileTrainDropdown()" class="dropdown-button">Влакове</button>
                    
                    <div id="tablet-trains" class="tablet-train-elements">
                    
                        <a href="#">Link 1</a>
                        
                        <a href="#">Link 2</a>
    
                        <a href="#">Link 3</a>
                    
                    </div>

                </div> 
                
                <a class="nav-button" href="#contacts">Контакти</a>
                <a class="nav-button" href="#aboutme">Повече за мен</a>
            
            </div>

        </div>
        
        <div class="branding">

            <a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>

        </div>
        
        <div class="nav-bar">

            <a class="nav-button" href="index.html">Начало</a>
            
            <div class="train-dropdown">
                
                <button onclick="TrainDropdown()" class="dropdown-button">Влакове</button>
                
                <div id="trains" class="train-elements">
                
                    <a id="first-element" href="#">Link 1</a>
                    
                    <a href="#">Link 2</a>

                    <a id="last-element" href="#">Link 3</a>
                
                </div>

            </div> 
            
            <a class="nav-button" href="#contacts">Контакти</a>
            <a class="nav-button" href="#aboutme">Повече за мен</a>
        
        </div>

    </div>   

   
</body>
</html>

You need to sign in to view this answers

Related Post