Can someone assist me with a peculiar issue I am facing?
I am attempting to toggle the visibility of certain elements when a user clicks a button.
Here is my HTML structure:
<div class='slide-content'>
<h1>Title</h1>
<div class='title-bar'>
sub title here
<div class='edit-container'>
<a class='edit' href='#'>Edit</a>
</div>
</div>
<div id='content' class='details'>
<div class='contents'>
<p>contents here</p>
</div>
<div class='break'></div>
</div>
<div id='edit-content' class='content-details'>
<div class='contents'>
<div class='editable-content'>
contents here…...
</div>
</div>
<div class='break'></div>
</div>
</div>
<div class='slide-content'>
…...
Followed by 10 more "slide-content" divs...
My jQuery code snippet:
$('.edit').on('click', function(e){
e.stopPropagation();
if($(this).text()=='Edit'){
$(this).text('Done');
$(this).closest('.slide-content').find($('.content-details')).show();
$(this).closest('.slide-content').find($('.details')).hide();
}else{
$(this).text('Edit');
$(this).closest('.slide-content').find($('.content-details')).hide();
$(this).closest('.slide-content').find($('.details').show());
}
})
});
CSS style for .content-details:
.content-details{
display:none;
}
The problem arises when I click the 'edit' button for the first time - it correctly displays my ".content-details" and hides the ".detail" div. However, upon clicking the 'edit' button again, it shows every ".details" div on the page (even those under different ".slide-content" divs). My intention is to only show one ".detail" div under the current ".slide-content."
I seem to be missing something in my logic. Any assistance would be much appreciated. Thank you!