CODEWITHSUNDEEP
javascriptjqueryhtmlcss
VB_
VB_

Reputation: 45692

JQuery: show div below pushed button

How can I show the div-element below the pushed button?

html:

<button id="one" class="btn">One</button>
<button id="two" class="btn">Two</button>
<button id="three" class="btn">Three</button>
<div id="popup">Message!</div>

JS:

$('.btn').click(function(e) {
   const targetBtn = e.target;
  $("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON
})

Upvotes: 0

Views: 10726

Answers (4)

timo
timo

Reputation: 2169

Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:

$("button").click(function(){
    $("#popup").insertAfter($(this));
});

http://jsfiddle.net/6FLLt/

If you want to show() it use

$("button").click(function(){
    $("#popup").show().insertAfter($(this));
});

http://jsfiddle.net/6FLLt/2/

UPDATE

If you want to place the message below the buttons visually you have to change to html and CSS like so:

HTML

<div class="relative">
    <button id="one" class="btn">One</button>
</div>
<div class="relative">
    <button id="two" class="btn">Two</button>
</div>
<div class="relative">
    <button id="three" class="btn">Three</button>
</div>
<div id="popup">Message!</div>

CSS

#popup{position:absolute; bottom:-20px; display:none;}
.relative{position:relative; float:left;}

http://jsfiddle.net/6FLLt/5/

Upvotes: 1

Jai
Jai

Reputation: 74738

Because your div has an id not class so you have to use # notation for ids:

$('.btn').click(function (e) {
   $("#popup").css({
        'position': 'absolute',
        'left': $(this).offset().left,
        'top': $(this).offset().top + $(this).height() + 5
   }).show("slow").delay(3000).hide("slow");
});

Demo

Upvotes: 6

Abhitalks
Abhitalks

Reputation: 28397

How can I show the div-element below the pushed button?

Set the margin of the div accordingly (to show the div directly below the pushed button):

$('.btn').click(function(e) {
    var $elem = $(e.target), 
        $div = $('#popup');
    $div.css('margin-left', $elem.offset().left + 'px');
    $("#popup").stop().show("slow").delay(500).hide("slow"); 
})

Demo: http://jsfiddle.net/abhitalks/5ef5L/

Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.

Aside: You need to use the $('#...') selector, because popup is an id.

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this

$('.btn').click(function(e) {
   $(this).after($('#popup'));
})

Note : User # for id and .(dot) for class

Upvotes: 0

Related Questions