CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
reTrOBIAS
reTrOBIAS

Reputation: 43

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:

        $(function() {
        var pull        = $('#pull');
            menu        = $('#nav');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
    });

Here's the html part:

<nav class="container">
  <a href="#" id="pull" style="display:block;"> 
      <h3>Menu</h3>
    </a>
        <ul id="nav" style="display:none;">
            <li><a href="#">Pizza</a></li>
            <li><a href="#">Pasta</a></li>
            <li><a href="#">Burger</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Drinks</a></li>
        </ul>
</nav>

It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.

I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.

Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...

Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/

Upvotes: 3

Views: 719

Answers (4)

Ori Drori
Ori Drori

Reputation: 192507

Use classes instead of ids, and then you can make the same code work for all cases (fiddle):

$(function () {
    var pull = $('.pull');

    $(pull).on('click', function (e) {
        e.preventDefault();
        var menu = $(this).next();
        menu.slideToggle();
    });
});

<nav class="container"> <a href="#" class="pull" style="display:block;"> 
          <h3>Menu1</h3>
        </a>

    <ul class="nav" style="display:none;">
        <li><a href="#">Pizza</a>
        </li>
        <li><a href="#">Pasta</a>
        </li>
        <li><a href="#">Burger</a>
        </li>
        <li><a href="#">Specials</a>
        </li>
        <li><a href="#">Drinks</a>
        </li>
    </ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
            <h3>Menu2</h3>
        </a>

    <ul class="nav" style="display:none;">
        <li><a href="#">Pizza</a>
        </li>
        <li><a href="#">Pasta</a>
        </li>
        <li><a href="#">Burger</a>
        </li>
        <li><a href="#">Specials</a>
        </li>
        <li><a href="#">Drinks</a>
        </li>
    </ul>
</nav>

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on

$(function() {
  var pull = $("[id^=pull]")
  , menu = $("[id^=nav]")
  , menuHeight = menu.height();

  pull.on("click", function(e) {
    e.preventDefault();
    $(e.target.parentElement.nextElementSibling).slideToggle();
  });
});

jsfiddle https://jsfiddle.net/wpvok7gy/1/

Upvotes: 0

ash
ash

Reputation: 1232

Try this: https://jsfiddle.net/thwdyccr/5/

Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).

You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()

If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.

HTML

<nav class="container">
  <a href="#" class="pull" style="display:block;"> 
      <h3>Menu1</h3>
    </a>
        <ul class="nav" style="display:none;">
            <li><a href="#">Bear</a></li>
            <li><a href="#">Pasta</a></li>
            <li><a href="#">Burger</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Drinks</a></li>
        </ul>
</nav>

<nav class="container">
    <a href="#" class="pull" style="display:block;">
        <h3>Menu2</h3>
    </a>
    <ul class="nav" style="display:none;">
        <li><a href="#">Fish</a></li>
        <li><a href="#">Pasta</a></li>
        <li><a href="#">Burger</a></li>
        <li><a href="#">Specials</a></li>
        <li><a href="#">Drinks</a></li>
    </ul>
</nav>

JS

$(function() {
    $(".pull").click(function(e) {
        e.preventDefault();
        var element = $(this); 
        element.parent('nav.container').children("ul.nav").slideToggle();
    });
});

Upvotes: 1

Garrett Kadillak
Garrett Kadillak

Reputation: 1060

You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.

Upvotes: 0

Related Questions