Welcome to WebmasterWorld Guest from 54.144.79.200

Forum Moderators: open

Message Too Old, No Replies

Toggle new div with jQuery on sibling

     

greencode

8:43 am on Jun 13, 2013 (gmt 0)

5+ Year Member



I have the following code…

<ul class="ppl clearfix">
<li class="bl">
<div class="image">
<div class="amt">22</div>
<img src="images/ph-image.jpg" alt="" />
</div>
</li>
<li class="bl">
<div class="image">
<div class="amt">4</div>
<img src="images/ph-image.jpg" alt="" />
</div>
</li>
</ul>

And then I'm trying to add a new div on click of the ".bl" div. What I have below works well but adds and removes the div to both of the li's I have above. I'm presuming I need to do something like sibling or closest but can't figure out where this needs to go in the code.

$(function(){
var NewContent='<div class="selected"></div>'
$(".bl").one('click', function(){
var $content = $(NewContent).insertAfter('.amt');
$(this).click(function(){
$content.toggle();
});
});
});

Any help or ideas would be greatly appreciated.

Fotiman

1:26 pm on Jun 13, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




$(function () {
var NewContent = '<div class="selected"></div>'
$(".bl").one('click', function () {
var $this = $(this),
$content = $(NewContent);
$this.find('.amt').after($content);
$this.click(function () {
$content.toggle();
});
});
});

greencode

1:58 pm on Jun 13, 2013 (gmt 0)

5+ Year Member



You are a genius! Thanks so much for this, really appreciated

Fotiman

2:08 pm on Jun 13, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



No problem. :) Glad to help.