CODEWITHSUNDEEP
javascriptjqueryhtmlcssonclick
QTaylor
QTaylor

Reputation: 11

Select Specific Elements With The Same Class In JQuery

I'm trying to create a select state using two div's positioned on top each other. One is positioned relatively and one is positioned absolutely with a bottom position of -200px. On Click of the relative div, the absolutely positioned div will slide in with a message of "success".

I have this working right now, but I need to go a little more in depth by removing the "success" div if the user decides that they want to change their selection. Also right now, when I click one div, all the divs show the "success" state. I want to fix this without touching the html/css.

Here is the JS fiddle. http://jsfiddle.net/LSan3/

 $(document).ready(function(){
  $('.main-div').click(function(){
    $('.inner-div').animate({
    bottom: "0px"
    }, 300 );
  });
});

Thanks !

Upvotes: 0

Views: 767

Answers (3)

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5123

  try the code given below:


  $(document).ready(function(){
   $('.main-div').click(function(){
  $('.inner-div').animate({bottom: "-1-0px"}, 300 );

   $(this).find('.inner-div').animate({
    bottom: "0px"
   }, 300 );
 });
});

I think this may help you.

Upvotes: 0

MeltingDog
MeltingDog

Reputation: 15404

I think this is what you want:

$(document).ready(function(){
  $('.main-div').click(function(){
    $('.inner-div').stop().animate({
    bottom: "-100px"
    }, 300 );
    $(this).find('.inner-div').stop().animate({
    bottom: "0px"
    }, 300 );
  });
});

http://jsfiddle.net/LSan3/3/

So in the click function we first hide all 'inner-divs' then find and show the one relative to 'this' - 'this' being the 'main-div' that was clicked.

Let me know if this is what you wanted to achieve.

EDIT: Also note I have added .stop() which will make sure your animation doesnt repeat multiple times if they user clicks the 'main-div' rapidly

Upvotes: 2

j08691
j08691

Reputation: 207901

Try:

$(document).ready(function () {
    $('.main-div').click(function () {
        $('.inner-div').animate({
            bottom: "-100px"
        }, 0);
        $(this).find('.inner-div').animate({
            bottom: "0px"
        }, 300);
    });
});

jsFiddle example

Upvotes: 0

Related Questions