How to show and hide a list

Asked

Viewed 68 times

0

People I have this list of countries with cities and I’m having a hard time getting that by clicking on one parent hide the cities from the other, when I click on one opens the cities and if I click on another ends up showing the two without hiding the other, follows the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: "Lato", "Avenir", sans-serif;
}



/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 
  overflow-x:hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size:30px;
  font-family:Lato;
  color:#000000;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #aa9871;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 60px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: none;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">

<button class="dropdown-btn">Argentina
  </button>
  <div class="dropdown-container">
    <a href="#">Bariloche</a>
    <a href="#">Buenos Aires</a>
</div>


  <button class="dropdown-btn">Brasil
  </button>

  <div class="dropdown-container">
    <a href="#">Paraná</a>
    <a href="#">Santa Catarina</a>
    <a href="#">Rio Grande do Sul</a>
 <a href="#">Rio Grande do Sul</a>
 <a href="#">Rio de Janeiro</a>
 <a href="#">São Paulo</a>
  </div>



  <button class="dropdown-btn">Paraguai
  </button>

  <div class="dropdown-container">
    <a href="#">Assunção</a>
  </div>


  <button class="dropdown-btn">Uruguai
   
  </button>
  <div class="dropdown-container">
    <a href="#">Montevideo</a>
    <a href="#">Punta Del Este</a>
    <a href="#">Rivera</a>
  </div>
</div>

<div class="main">
 
</div>

<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}



$(function(){
  $(".btn-toggle").click(function(e){
      e.preventDefault();
      $(".dropdown-container").hide(); //Oculta todos elemento com classe grupo
      
      el = $(this).data('element');
      $(el).toggle(); //Exibe o elemento clicado.
  });
});
</script>

</body>
</html>

html5

  • try toggleClass with two hidden classes and sample

2 answers

0

Before opening the list of cities of a country, ensure that all lists are closed:

    //Antes de abrir o novo dropdown
    var elementosAFechar = this.parentNode.getElementsByClassName('dropdown-container');
    for (let elemento of elementosAFechar) {
        elemento.style.display = "none";
    }


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: "Lato", "Avenir", sans-serif;
}



/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 
  overflow-x:hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size:30px;
  font-family:Lato;
  color:#000000;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #aa9871;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 60px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: none;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">

<button class="dropdown-btn">Argentina
  </button>
  <div class="dropdown-container">
    <a href="#">Bariloche</a>
    <a href="#">Buenos Aires</a>
</div>


  <button class="dropdown-btn">Brasil
  </button>

  <div class="dropdown-container">
    <a href="#">Paraná</a>
    <a href="#">Santa Catarina</a>
    <a href="#">Rio Grande do Sul</a>
 <a href="#">Rio Grande do Sul</a>
 <a href="#">Rio de Janeiro</a>
 <a href="#">São Paulo</a>
  </div>



  <button class="dropdown-btn">Paraguai
  </button>

  <div class="dropdown-container">
    <a href="#">Assunção</a>
  </div>


  <button class="dropdown-btn">Uruguai
   
  </button>
  <div class="dropdown-container">
    <a href="#">Montevideo</a>
    <a href="#">Punta Del Este</a>
    <a href="#">Rivera</a>
  </div>
</div>

<div class="main">
 
</div>

<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    //Antes de abrir o novo dropdown
    var elementosAFechar = this.parentNode.getElementsByClassName('dropdown-container');
    for (let elemento of elementosAFechar) {
      elemento.style.display = "none";
    }
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

/* Não sei o que faz
$(function(){
  $(".btn-toggle").click(function(e){
      e.preventDefault();
      $(".dropdown-container").hide(); //Oculta todos elemento com classe grupo
      
      el = $(this).data('element');
      $(el).toggle(); //Exibe o elemento clicado.
  });
});
*/
</script>

</body>
</html>

0

If you are loading jQuery, you can do it using library codes:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: "Lato", "Avenir", sans-serif;
}



/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 
  overflow-x:hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size:30px;
  font-family:Lato;
  color:#000000;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #aa9871;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 60px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: none;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">

<button class="dropdown-btn">Argentina
  </button>
  <div class="dropdown-container">
    <a href="#">Bariloche</a>
    <a href="#">Buenos Aires</a>
</div>


  <button class="dropdown-btn">Brasil
  </button>

  <div class="dropdown-container">
    <a href="#">Paraná</a>
    <a href="#">Santa Catarina</a>
    <a href="#">Rio Grande do Sul</a>
 <a href="#">Rio Grande do Sul</a>
 <a href="#">Rio de Janeiro</a>
 <a href="#">São Paulo</a>
  </div>



  <button class="dropdown-btn">Paraguai
  </button>

  <div class="dropdown-container">
    <a href="#">Assunção</a>
  </div>


  <button class="dropdown-btn">Uruguai
   
  </button>
  <div class="dropdown-container">
    <a href="#">Montevideo</a>
    <a href="#">Punta Del Este</a>
    <a href="#">Rivera</a>
  </div>
</div>

<div class="main">
 
</div>

<script>
$(function(){
  $(".dropdown-btn").click(function(){
     $(".dropdown-container").hide(); //Oculta todos elemento com classe
     $(this).next().toggle(); //mostra o elemento seguinte ao botão clicado
  });
});
</script>

</body>
</html>

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.