Trying to add an additional function

JavaScript
1

Hi.

I am using this script:

https://codepen.io/sekedus/pen/JOweWa

Works fine but I need to add the option to hide the lists when clicking on their respective links as a way to close the dropdown.

Is it possible to add the option to this script or should I seek other option?

Thanks.

2

Hi there andresb,

this can now be done without any JavaScript…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS toggle</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#sm1, 
#sm2 {
    display: none;
 }

#sm1:target, 
#sm2:target {
    display: block;
 }
</style>

</head>
<body> 

<ul id="menu">
  <li><a href="#sm1">Menu 1</a>
    <ul id="sm1">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li><a href="#menu">Close Menu 1</a>
    </ul>
  </li>
  <li><a href="#sm2">Menu 2</a>
    <ul id="sm2">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li><a href="#menu">Close Menu 2</a>
    </ul>
  </li>
</ul>

</body>
</html>

coothead

1 Like
3

The problem is that I cannot change the url in the links. They are functioning links.

4

The only links that I see in your codepen are two of these
<a href="#">

What is wrong with changing them to <a href="#sm1">
and <a href="#sm2"> respectively and what prevents
you from doing so?

coothead

5

Nice one! I tried the hidden checkbox/label trick, but then the others item don’t collapse when you tick one.

6

Wait, are you saying that those items should be links and also expand the submenu? How is that supposed to work? As soon as you click a link you navigate away from the page, so any submenu that expands is pointless as the user won’t see it.

1 Like
7

The problem with that approach in general is that it won’t work any more as soon as you have any other anchor links on the same page… it’s certainly nice what you can achieve with CSS alone, but IME those tricks rarely work well on a real page.

For a more robust JS solution you might remember the active submenu toggle, and toggle() the show class depending on whether or not the currently clicked toggle is the active one:

CSS

.submenu {
   display: none;
}

.show + .submenu {
   display: block;
}

<ul>
  <li>
    <a class="submenu-toggle" href="#">Menu 1</a>
    <ul class="submenu">
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
  </li>
  <li>
    <a class="submenu-toggle" href="#">Menu 2</a>
    <ul class="submenu">
      <li>beep</li>
      <li>boop</li>
    </ul>
  </li>
</ul>

JS

var toggles = document.querySelectorAll('.submenu-toggle')
var active = null

function toggleSubmenus (event) {
  var current = event.target
  var isCurrentActive = current === active

  toggles.forEach(function (toggle) {
    // Only add the "show" class if the toggle is the one that has been
    // clicked, and if that toggle hasn't been active before; otherwise,
    // remove the class
    toggle.classList.toggle('show', toggle === current && !isCurrentActive)
  })

  // Remember the currently active toggle,
  // or unset it if it was active before
  active = isCurrentActive ? null : current
}

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', toggleSubmenus)
})
8

Works perfectly. Thanks

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.