CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nick_green
nick_green

Reputation: 1664

jquery on click appear another element in html

for example I have this html code:

<div class="product">
    <p>Name1<p>
</div>
<div class="product">   
    <p>Name2<p>
</div>
<div class="product">
    <p>Name3<p>
</div>
<div class="product">
    <p>Name4<p>
</div>
<div class="settings">
    <p>SETTINGS<p>
</div>

I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.

How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?

Upvotes: 2

Views: 95

Answers (3)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.

Run the code snippet below and click on any of the elements with the classname product to see how this works.

$(".product").click(function(){
    $(".settings").insertAfter($(this));
});


    $(".product").click(function(){
       $(".settings").insertAfter($(this));
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <p>Name1
    <p>
</div>
<div class="product">
  <p>Name2
    <p>
</div>
<div class="product">
  <p>Name3
    <p>
</div>
<div class="product">
  <p>Name4
    <p>
</div>
<div class="settings">
  <p>SETTINGS
    <p>
</div>

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You can do it like,

$(".product > p").click(function(){
 var $parent = $(this).parent(".product");
 $parent.siblings(".settings").insertAfter($parent);
});

by using .insertAfter()

DEMO

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use .insertAfter() :

$(function(){
  $('.product p').click(function(){
    $('.settings').insertAfter($(this).closest('.product '))
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
    <p>Name1<p>
</div>
<div class="product">   
    <p>Name2<p>
</div>
<div class="product">
    <p>Name3<p>
</div>
<div class="product">
    <p>Name4<p>
</div>
<div class="settings">
    <p>SETTINGS<p>
</div>

Upvotes: 2

Related Questions