homepage Welcome to WebmasterWorld Guest from 54.237.134.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
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
greencode




msg:4569427
 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>
</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




msg:4569436
 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 () {
$(this).siblings('.remove-ctn').toggle();
});

greencode




msg:4569604
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved