Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: open

Message Too Old, No Replies

Tricky (to me) toggle, hide, swap divs

     

greencode

8:30 pm on Apr 30, 2013 (gmt 0)

5+ Year Member



Struggling a bit with this one. On a page I've got a lot of divs (.result) which when the user clicks the delete icon (a.delete) an overlay (.remove-ctn) appears over the result. This has a button (.removed) and when the user hovers over that button another one replaces it (.undo). When the user clicks undo then the result goes back to normal with no overlay.

I'm making a bit of a mess of the javascript and am hoping someone may be able to help?

So I have this…

<div class="result">
<div class="details">
<div class="remove-ctn" style="display: none;">
<div class="link removed">Removed</div>
<div class="link undo" style="display: none;"><span>Undo</span></div>
</div>
<a class="delete" href="#"><span>Remove</span></a>
<img src="photo.jpg" alt="" />
</div>
</div>

<script>
$("a.delete").click(function () {
$(".remove-ctn").toggle();
});
$('.removed').mouseenter(function(){
$('.undo').toggle();
});
$('.undo').mouseleave(function(){
$('.undo').toggle();
});
$(".undo").click(function () {
$(".remove-ctn").toggle();
});
</script>

The problem with this is that it

a) triggers all results on the page and so if I click the delete button then the overlay appears on all results.

b) when I hover over the removed button and the other undo button appears, when I click that it removed the overlay but then when I click on the delete button again the undo button is shown instead of the removed button.

Hopefully that all makes some sense?

Any ideas or help would be really appreciated.

Fotiman

9:10 pm on Apr 30, 2013 (gmt 0)

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



You probably need to do be more specific. Something more like this:

$("a.delete").click(function () {
$(this).siblings('.remove-ctn').toggle();
});

greencode

8:48 am on May 1, 2013 (gmt 0)

5+ Year Member



Thanks for this. Always get a little confused with siblings, closest etc etc
 

Featured Threads

Hot Threads This Week

Hot Threads This Month