Dropdown content not showing correctly on button click – dynamically

I have a issue with dropdown content on side http://www.filmwatch.sk/serialy/the-godfather/ When I click on button 1.seria show dropdown content 1.epizode, but when I click on button 2.seria show same dropdown content 1.epizode, but I need show 2 and 3 epizode (dropdown content Godfather S02E02 and Godfather S02E03). Here is code:

<style>
/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>


<?php
if( have_rows('o1') ):
   while( have_rows('o1') ): the_row(); 
   ?>
<button onclick="myFunction()" class="dropbtn"><?php the_sub_field('s'); ?></button>
    <div id="myDropdown" class="dropdown-content">
    <?php
    if( have_rows('o2') ):
    while ( have_rows('o2') ) : the_row();
$link = get_sub_field('e');
    if( $link ): 
    $link_url = $link['url'];
    $link_title = $link['title'];
    $link_target = $link['target']? $link['target'] : '_self';
    ?>
    <a class="button" href="<?php echo esc_url( $link_url ); ?>" target="<?php
    echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?><br></a>
<?php endif;         
 endwhile;
else :
endif; ?>  </div>  <?php
endwhile; 
endif;  
?>


<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

Any help is much appreciated

Answer

There are two main problems:

The dropDown boxes all have the same id so the first one is always found in myFunction. An id must be unique in the DOM.
myFunction does not unshow any dropDown that might already be showing

A solution is to remove the use of ids altogether and to get myFunction to clear any currently showing dropDowns.

Replace these two lines

<button onclick="myFunction()" class="dropbtn"><?php the_sub_field('s'); ?></button>
<div id="myDropdown" class="dropdown-content">

with these

<button onclick="myFunction(event)" class="dropbtn"><?php the_sub_field('s'); ?></button>
<div class="dropdown-content">

and replace the JavaScript with this

/* When the user clicks on **a** button,
toggle between hiding and showing the dropdown content */
function myFunction(event) {
//FIND THE DROPDOWN ELEMENT ASSOCIATED WITH THE BUTTON THAT HAS JUST BEEN CLICKED
  var dropdownEl = event.target.nextElementSibling;
  dropdownEl.classList.toggle("show");
  clearShowExcluding(dropdownEl);
}

function clearShowExcluding(el) {
//CLEAR ANY SHOW CLASS ON ANY OTHER DROPDOWN ELEMENT
  var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if ((openDropdown!=el)&&openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    clearShowExcluding('');
  }
}

Advertisement

Answer