homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Tricky (to me) toggle, hide, swap divs

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

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>
<a class="delete" href="#"><span>Remove</span></a>
<img src="photo.jpg" alt="" />

$("a.delete").click(function () {
$(".undo").click(function () {

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.



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

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

$("a.delete").click(function () {


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

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved