Has anyone had success implementing a functionality where a div expands upon clicking, and reverts back to its original state when clicking on a cancel link within the same div?
<div class="new-discussion small">
<a class="cancel">Cancel</a>
</div>
<script>
$('.new-discussion.small').click(function() {
$(this).addClass("expand").removeClass("small");
});
$('a.cancel').click(function() {
$('.new-discussion.expand').addClass("small").removeClass("expand");
});
</script>
While adding the expand class works as intended, closing the panel by clicking on the cancel link only functions properly when a certain code snippet is removed. It seems that this particular section of code may be preventing the second function from executing correctly.
$('.new-discussion.small').click(function() {
$(this).addClass("expand").removeClass("small");
});
Could someone provide some insight into why this might be happening? Any ideas or suggestions would be greatly appreciated! Thanks!