When opening side tabs, close completely when other tabs open - java script

Asked 2 weeks ago, Updated 2 weeks ago, 1 views

I'm making a side tab. The basic screen contains only icons within a thin, long square, and when you click the icon, the tab expands and opens. You have successfully pressed and closed each tab, but if you press multiple tabs at the same time, for example, if you open them in the reverse order, there is no problem if you close 'I' first or 'A', and the tab does not open. I think it's a problem caused by the existing tab not closing completely when the other tab is pressed, but I can't find a way to solve it and ask you this question. How do you construct an if statement or another function to do it the way you want it to? Below is the js code. I also attach html and css code! Thank you!

let sidebar = document.querySelector(".sidebar");
let project = document.querySelector(".project");
let friends = document.querySelector(".friends");
let todo = document.querySelector(".todo");
let calendar = document.querySelector(".calendar");
let closeBtn = document.querySelector("#btn");
let projectBtn = document.querySelector(".bx-grid-alt");
let friendsBtn = document.querySelector(".bx-user");
let todoBtn = document.querySelector(".bx-chat");
let calendarBtn = document.querySelector(".bx-folder");


closeBtn.addEventListener("click", ()=>{
    sidebar.classList.toggle("open");
    menuBtnChange();//calling the function(optional)
});

projectBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    project.classList.toggle("open");
    if(friends.classList.contains("open")){
        friends.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

friendsBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    friends.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

todoBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    todo.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle("close");
    }
    if(friends.classList.contains("open")){
        friends.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

calendarBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    calendar.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle("close");
    }
    if(friends.classList.contains("open")){
        friends.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle("close");
    }

    menuBtnChange(); //calling the function(optional)
});

// // following are the code to change sidebar button(optional)
function menuBtnChange() {
   if(sidebar.classList.contains("open")){
     closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
   }else {
     closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
   }
}
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/CodingLabYT-->
<html lang="ko" dir="ltr">

<head>
  <meta charset="UTF-8">
  <!--<title> Responsive Sidebar Menu  | CodingLab </title>-->
  <link rel="stylesheet" href="stylesss.css">
  <!-- Boxicons CDN Link -->
  <script src="https://kit.fontawesome.com/29ee0bc57e.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ToasTooL</title>
</head>

<body>
  <div class="sidebar">
    <div class="logo-details">
      <i class='bx bx-menu' id="btn"></i>
    </div>
    <ul class="nav-list">
      <li>
        <nav class="project"></nav>
        <a href="#">
          <i class='bx bx-grid-alt'></i>
        </a>
        <span class="tooltip">Project</span>
      </li>
      <li>
        <nav class="friends"></nav>
        <a href="#">
          <i class='bx bx-user'></i>
        </a>
        <span class="tooltip">Friends</span>
      </li>
      <li>
        <nav class="todo">
          <div id="tabwrap">
            <button class="menu1 on">Project</button>
            <button class="menu2">Personal</button>
            <div class="board1" -ms-overflow-style: none;>
              <header>
                <input type="text" id="myInput1" placeholder="Tings to be done in the project..." autocomplete="off" />
                <span class="addBtn1" id="add_button1">+</span>
              </header>
              <ul class="ful" id="myUL1"></ul>
              <script script src="script.js"></script>
            </div>
            <div class="board2">
              <header>
                <input type="text" id="myInput2" placeholder="Tings to be done in personal..." autocomplete="off" />
                <span class="addBtn2" id="add_button2">+</span>
              </header>
              <ul id="myUL2"></ul>
              <script script src="scriptt.js"></script>
            </div>
          </div>
        </nav>
        <a href="#">
          <i class='bx bx-chat'></i>
        </a>
        <span class="tooltip">Todo</span>
      </li>
      <li>
        <nav class="calendar"></nav>
        <a href="#">
          <i class='bx bx-folder'></i>
        </a>
        <span class="tooltip">Calendar</span>
      </li>
      <li class="profile">
        <div class="profile-details">
          <img src="profile.jpg" alt="profileImg">
          <div class="name_job">
            <div class="name">Prem Shahi</div>
            <div class="job">Web designer</div>
          </div>
        </div>
        <i class='bx bx-log-out' id="log_out"></i>
      </li>
    </ul>
  </div>
  <section class="home-section">
    <div class="text">Dashboard</div>
  </section>
  <iframe src="www.wikipedia.org"></iframe>
  <script script src="scripttt.js"></script>
</body>

</html>
let sidebar = document.querySelector(".sidebar");
let project = document.querySelector(".project");
let friends = document.querySelector(".friends");
let todo = document.querySelector(".todo");
let calendar = document.querySelector(".calendar");
let closeBtn = document.querySelector("#btn");
let projectBtn = document.querySelector(".bx-grid-alt");
let friendsBtn = document.querySelector(".bx-user");
let todoBtn = document.querySelector(".bx-chat");
let calendarBtn = document.querySelector(".bx-folder");


closeBtn.addEventListener("click", ()=>{
    sidebar.classList.toggle("open");
    menuBtnChange();//calling the function(optional)
});

projectBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    project.classList.toggle("open");
    if(friends.classList.contains("open")){
        friends.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

friendsBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    friends.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

todoBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    todo.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle("close");
    }
    if(friends.classList.contains("open")){
        friends.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

calendarBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    calendar.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle("close");
    }
    if(friends.classList.contains("open")){
        friends.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle("close");
    }

    menuBtnChange(); //calling the function(optional)
});

// // following are the code to change sidebar button(optional)
function menuBtnChange() {
   if(sidebar.classList.contains("open")){
     closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
   }else {
     closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
   }
}

javascript

2022-09-20 14:54

2 Answers

I asked for HTML and CSS, but I'm sorry for answering late (I tend to answer when I don't have anything to do at work...) Haha;;)

The cause of the problem is that when you click the menu, you can see the class changes of the DOM elements, but if you don't click it in order, the open close goes into the class together. Definitely open/close You just have to let one class go in

projectBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    if(project.classList.contains("close")){
        project.classList.toggle('close');
    }
    project.classList.toggle("open");
    if(friends.classList.contains("open")){
        friends.classList.toggle('open');
        friends.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle('open');
        todo.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle('open');
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

friendsBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    if(friends.classList.contains("close")){
        friends.classList.toggle('close');
    }
    friends.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle('open');
        project.classList.toggle("close");
    }
    if(todo.classList.contains("open")){
        todo.classList.toggle('open');
        todo.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle('open');
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

todoBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
    if(todo.classList.contains("close")){
        todo.classList.toggle('close');
    }
    todo.classList.toggle("open");
    if(project.classList.contains("open")){
        project.classList.toggle('open');
        project.classList.toggle("close");
    }
    if(friends.classList.contains("open")){
        friends.classList.toggle('open');
        friends.classList.toggle("close");
    }
    if(calendar.classList.contains("open")){
        calendar.classList.toggle('open');
        calendar.classList.toggle("close");
    }
    menuBtnChange(); //calling the function(optional)
});

The above code is inefficient and it takes a long time to correct bugs or functions, so I think you can do the actual application method as below.

/* Homologous */
var q = new Array(project, friends, todo, calendar);
var e = new Array(projectBtn, friendsBtn, todoBtn, calendarBtn);

for (i in e) {
  e[i].addEventListener("click", function() { menuBtnChange(this) });
}

function menuBtnChange(w) {
  for(i in e){
    if (w === e[i]) {
      if (q[i].classList.contains('close')) q[i].classList.remove('close');
      q[i].classList.add('open');
    } } else {
      if (q[i].classList.contains('open')){
        q[i].classList.remove('open');
        q[i].classList.add('close');
      }
    }
  }

   if(sidebar.classList.contains("open")){
     closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
   }else {
     closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
   }
}


2022-09-20 14:54

The demo was more serious than I thought, so it's hard to say anything at my level. I tend to look at the implementations of various frameworks such as bootstrap and jquery plug-ins when I get stuck implementing UI, and the tab is usually implemented as follows.

And depending on how you write this control, it becomes a tab, it becomes an accordion, it becomes a whole lot of different things. And I think what you're trying to implement is more like accordion. This is because there are at least zero and at most one that can be unfolded.

In the case of bootstrap, if what I learned from my experience is correct, the accordion controls:

To be sure, if we do this, there will be up to one active panel, and if we press the tabs on that panel again, all the panels will close well, so what do you think about it, without much illogical behavior?

I filled everything with words without a line of code, but from here on out, you have to look back at your own code and think about how to refactoring. After all, you know best what the final result is that you really want. Think about it carefully and go calmly. I hope it was helpful and I'll turn it off now.

Four-legged 1. To answer the question itself... The reason for this anomaly seems to be that .open and .close are used at the same time. Due to the listing of copy and paste codes and CSS, the priority is twisted and it will be very difficult to track the priority. Since the definition that comes out later is more important for CSS, .As long as .calendar.open is written after friend.close, whether the calendar is opened is more important than whether the Friends list window is closed. No? Oh! I'm confused.

Four feet 2. In everyday life, the opposite of open is close, but in the world of engineering, the opposite of open is not open because it's theoretically possible to say open and close or not close. (That's probably what the menus are.) This is a very important concept, so I'll pretend to know. I don't know anything else, but don't forget this and keep that in mind.


2022-09-20 14:54

If you have any answers or tips


© 2022 pinfo. All rights reserved.