JQuery check if objects are hidden

Question

4.00/5 (1 vote)

See more:

Hello, I have an issue. I have 10 images in a div. The images' names are in a second div. So, there are 10 images and 10 names.

When a user will click on an image, it will hide as well as its respective name. So, if the user clicks on the second image, it will hide as well as its name until everything is hidden.

Once the user has clicked all images, an alert box will appear. Refer to the code now for a single image:

$(document).ready (function() {
    $("#image").click(function() {
    $("#image, #name").hide("slow");
    if ($("#image").is(":hidden")) {
    alert("Ok");
    };
    });
});

As you see, when the user will click an image, it will hide as well as well the name. This goes the same for all images. The alert box will be displayed once the image is hidden else not, so I have to verify if the image is hidden. I could give them a single class instead of an ID, but the user can click only on the image div. Bear in mind, the above example is just for one image only. I have 10 images, but decided to include example for one in general to make you understand. The image and the name are hiding, but the alert box is not displayed!

Posted 30-Oct-12 10:56am

bunnyali2013

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

AspDotNetDev · Answer 1 · 2012-10-30T12:28:00

The problem is likely that the "hide" function takes a second to hide things, so it's not actually hidden yet when you check if it's hidden. One way to solve that would be to check if it's hidden after the hide operation. That would go something like this:

JavaScript

$(document).ready (function() {
  $("#image").click(function() {
    $("#image, #name").hide("slow", function() {
      if ($("#image").is(":hidden")) {
        alert("Ok");
      };
    });
  });
});

If you want to know more about the options you can use with the hide function, look here: http://api.jquery.com/hide/

Ahmedwaheed · Answer 2 · 2012-10-30T11:43:00

Solution 1

check this solution

C#

$(document).ready(function () {
        $("#image1").click(function () {
            $("#image1, #name1").hide("slow");
            if ($("#image1:hidden")) {
                alert("Ok");
            };
        });
    });

Posted 30-Oct-12 11:43am

Ahmedwaheed

Comments

AspDotNetDev 30-Oct-12 18:30pm

FYI, I don't think your solution would solve the problem. See my answer for a description of what I think the problem is.