How to find div that has matching data attr then remove class

Question

Here is my attempt that doesn't seem to be working:

$('container').find("[data-slider='" + one + "']").removeClass('hidden');

Here is the full function that is wrapped in a document. ready function

$("#service-icon").on('click', function(){

       var $this = $(this);
       event.preventDefault();

       $this.addClass('ease-transition').toggleClass('active-slider-btn');

       $(".page-wrapper").find("[data-slider='" + one + "']").toggleClass("hidden");


 });

The error that I am getting is:

"Uncaught ReferenceError: one is not defined"

Answer 1

Things to check:

1. Is `container` a class or id? If so you'll need to add a `.` or `#` respectively
2. That the expression in the `.find()` function returns what you're expecting

Can you post a link to a JSFiddle or something?

I have a working example here that is similar to your situation.

HTML

<div class="container">
    <div data-slider="1" class="hidden">1</div>
    <div data-slider="2">2</div>
</div>

<button id="show-1">show slider 1</button>

CSS

.hidden {
    display: none;
}

JavaScript

var one = "1";

$("#show-1").click(function(e){
    $(".container").find("[data-slider='" + one + "']").removeClass("hidden");
});

Answer 2

Something like this has to work:

   $('.page-wrapper').find("[data-slider='" + one + "']").removeClass('hidden');

See it working here: http://jsfiddle.net/sNp7x/2/

Maybe the data attribute is set via javascript as well, so you have to be aware of the timing?!