Picking Out Specific Elements Sharing a Class in JQuery

Question

Picking Out Specific Elements Sharing a Class in JQuery

Currently, I am working on developing a select state using two divs that are stacked on top of each other. One div is positioned relatively while the other is positioned absolutely with a bottom position set to -200px. When the relative div is clicked, the absolutely positioned div slides in displaying a "success" message.

Although this functionality is already implemented, I am looking to enhance it by removing the "success" div if the user changes their selection. Additionally, at the moment, clicking one div triggers all the divs to show the "success" state simultaneously. I am seeking a solution to rectify this issue without making any modifications to the html or css code.

You can find the JS fiddle for reference here: http://jsfiddle.net/LSan3/

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

Thank you!

javascript jquery html css onclick

Answer 1

Answer №1

Here is a solution that may meet your requirements:

$(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/

Within the click function, we are first hiding all 'inner-divs' and then displaying the one related to 'this' - in this case, the 'main-div' that was clicked.

If this accomplishes what you were aiming for, please let me know.

EDIT: I have also included .stop() to prevent the animation from repeating multiple times if the user clicks the 'main-div' quickly.

Answer 2

Here is a solution that may meet your requirements:

$(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/

Within the click function, we are first hiding all 'inner-divs' and then displaying the one related to 'this' - in this case, the 'main-div' that was clicked.

If this accomplishes what you were aiming for, please let me know.

EDIT: I have also included .stop() to prevent the animation from repeating multiple times if the user clicks the 'main-div' quickly.

Answer 3

Answer №2

Give it a shot:

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

Check out the jsFiddle demo

Answer 4

Give it a shot:

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

Check out the jsFiddle demo

Answer 5

Answer №3


 Give this code a try:

$(document).ready(function(){
 $('.container').click(function(){
  $('.content').animate({top: "-10px"}, 300 );

  $(this).find('.content').animate({
   top: "0px"
  }, 300 );
 });
});

Hopefully this solution works for you.

Answer 6


 Give this code a try:

$(document).ready(function(){
 $('.container').click(function(){
  $('.content').animate({top: "-10px"}, 300 );

  $(this).find('.content').animate({
   top: "0px"
  }, 300 );
 });
});

Hopefully this solution works for you.

Picking Out Specific Elements Sharing a Class in JQuery

Answer №1

Answer №2

Answer №3

Similar questions

What causes a CSS class to have priority over another?

Utilize the Stripe Payment Gateway within your Cordova/Phonegap Application

Avoid choosing the menuItem when clicking on the icon within the Material UI select component

Searchbox aligned to the right using Bootstrap

As I resize my browser window, I notice that my menu button starts to shift upwards along the

How can I configure knockoutjs for Danish culture?

The PHP script encounters an Ajax request and returns a null response

Nest is struggling to find solutions for the dependencies required by the UsersService

The Express server is set up with CORS enabled, however, it continues to encounter issues when attempting to make asynchronous HTTP requests from

Place a <p> element at the bottom of a parent <div> that is floating

Using jQuery, locate the largest number within a specific class, add 1 to its value, and then input the remaining value into

Revamp the color scheme of the majestic university WordPress theme

A guide on accessing objects from an array in Vue.js

Compilation of geographic points within a database table

The reason why setting height to 0 is ineffective in a CSS definition

Toggle the active class on the parent element when it is clicked

The index on ref in MongoDB does not seem to be yielding any improvements

Using jQuery in Javascript, obtain the chosen radio option and place it within a label tag

An error occurs when trying to access the 'map' property of an undefined variable

Accessing a JBoss Web Service using JavaScript (AJAX) - A Comprehensive Guide