CODEWITHSUNDEEP
jquerycustom-data-attribute
niksos
niksos

Reputation: 433

jQuery data attribute show and hide

In my webpage, I have the following menu links:

<li class="menu1"><a data-menu="#breakfast">Breakfast</a></li>
<li class="menu2"><a data-menu="#lunch">Lunch</a></li>

<div class="row menu-row" id="breakfast"></div>
<div class="row menu-row" id="lunch"></div>

I need to find the div with #breakfast and show it. Here's what I've tried:

$('.menu-menu li a').click(function () {
    $('.menu-menu li').removeClass('active');
    $('#menu .menu-row').hide(); // hide all
    $(this).attr("data-id").show; //how to find and show the matching div?
});

How can I make this work?

Upvotes: 0

Views: 989

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

Firstly you can use data() to retrieve data attributes as it's quicker. This will return you a string which you can put in to the selector to get the required element:

$('.menu-menu li a').click(function () {
    $('.menu-menu li').removeClass('active');
    $('#menu .menu-row').hide();
    $($(this).data('menu')).show(); 
});

Given your HTML it would appear that you want to retrieve the data-menu value from the clicked item, not the data-id. Also note that you missed the trailing brackets from the show() call.

Upvotes: 1

Related Questions