CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
Sébastien Gicquel
Sébastien Gicquel

Reputation: 4386

How to target an element under an other element?

I can click on a button (button A) and with some jquery it makes an image visible on this button at the exact same position (position:absolute).

See this fiddle

I would like to click again on this button (button A) to hide the image but i don't know how because the image is over the button.

I've found other solutions (more jquery or use an invisible image button) but i would like to find a more elegant way.

How can i target the button which is under the image ?

Jquery Code :

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        } else {
            $('#image_1').css('visibility', 'hidden');
        }
    });
});

CSS :

#button
{
    width:100px;
    background-color:#666666;
    height:25px;
    position:absolute;
    left:10px;
    top:10px;
}

#image_1
{
    width:100px;
    background-color:#666666;
    height:25px;
    position:absolute;
    left:10px;
    top:10px;
    visibility:hidden;
}

html

<div id=main>
    <div id="button">
    </div>
    <div id="image_1">Hello World!
    </div>
</div><!-- main -->

@closure @Justin John @Jai @Robz @Adam @Happy Singh @Ross Dargan @Wouter de Kort @Viral Patel @Ruben Stolk Thank you for all your interesting answers. It's difficult to choose because there are some really good ones. I've chosen Adam's answer because it's the simplest (juste use toglle jQuery and a css class). If you think your answer is better, please post your arguments here.

Upvotes: 1

Views: 192

Answers (11)

Timothy Smith
Timothy Smith

Reputation: 848

Instead of causing the image to become responsive to clicking (which does not work when there are multiple buttons below the image), you could make the image non-responsive to clicks using the pointer-events CSS property. It would look something like this:

#image_1
{
  pointer-events: none;
}

See fiddle: http://jsfiddle.net/eCCR6/31/

This will cause clicks to pass through the image directly to the button below.

The disadvantage to this method is that the image no longer responds to mouse movement, but in this case, that's okay.

Upvotes: 0

closure
closure

Reputation: 7452

See the fiddle http://jsfiddle.net/eCCR6/2/.

I have created the function like this, and bound to both:

function clickFn() {
    if ($('#image_1').css('visibility') == 'hidden') {
        $('#image_1').css('visibility', 'visible');
    } else {
        $('#image_1').css('visibility', 'hidden');
    }
}

Another model is to bind your event to the parent div main.

See the fiddle http://jsfiddle.net/eCCR6/18/

Upvotes: 1

Justin John
Justin John

Reputation: 9635

You can also combine both selectors like this in fiddle.

$('#button, #image_1').click(function() {
 // Your code 
});

Upvotes: 1

Jai
Jai

Reputation: 74748

I think you have to trigger the button on mousedown on img 1 try this one:

  $(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        } else if ($('#image_1').css('visibility') == 'visible') {
            $('#image_1').css('visibility', 'hidden');
        }

        $('#image_1').mousedown(function(){
           $('#button').click();
        });
    });
});

Here we have done 1 else if check and trigger the button click on mousedown event on #image_1.

checkout the fiddle: http://jsfiddle.net/eCCR6/16/

Upvotes: 1

user1865135
user1865135

Reputation:

just change your javascript to 

$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
    if ($('#image_1').css('visibility') == 'hidden') {
        $('#image_1').css('visibility', 'visible');
    } else {
        $('#image_1').css('visibility', 'hidden');
    }
});
$('#image_1').click(function(){
          $('#image_1').css('visibility', 'hidden');
});


});

Upvotes: 1

Adam Tomat
Adam Tomat

Reputation: 11536

I binded the click event to both the #button and the #image by adding the class button to them both; when you click either, it will show/hide the image.

Also if you use display: none instead of visibility: hidden you can use jQuery's toggle(), which saves you a few lines of code.

see the fiddle

$(document).ready(function() {
    $('.button').click(function() {
        $('#image_1').toggle();
    });
});

Upvotes: 1

w3uiguru
w3uiguru

Reputation: 5895

See the updated fiddle http://jsfiddle.net/eCCR6/8/

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        }
    });
    $('#image_1').click(function() {
        if ($('#image_1').css('visibility') == 'visible') {
            $('#image_1').css('visibility', 'hidden');
        }
    });


});

Upvotes: 1

Ross Dargan
Ross Dargan

Reputation: 6021

This fiddle shows how it can be done easliy: http://jsfiddle.net/33aus/1/

Note I changed the image's css to display:none.

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(toggleVisiblity);
    $('#image_1').click(toggleVisiblity);
});
function toggleVisiblity()
{    
    $('#button').toggle();
    $('#image_1').toggle();
}​

Upvotes: 1

Wouter de Kort
Wouter de Kort

Reputation: 39898

It is easier to put the image div inside your button div. You can also use the jQuery toggle function to show/hide the image.

<div id=main>
    <div id="button">
       <div id="image_1">Hello World!
       </div>    
    </div>
</div><!-- main -->    ​

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        $('#image_1').toggle();
    })
});​

Here is a fiddle that shows it: http://jsfiddle.net/jBaWN/2/

Upvotes: 1

Viral Patel
Viral Patel

Reputation: 8601

How about something like:

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        $('#image_1').show();
    });

    $('#image_1').click(function() {
       $(this).hide();
    });
});​

Check this demo: http://jsfiddle.net/viralpatel/R5MVD/1/

Upvotes: 1

Ruben Stolk
Ruben Stolk

Reputation: 13324

Use the jquery .prev() or .next() function

Upvotes: 0

Related Questions