I am working on a code snippet where I need to hide the detailed content for display purposes and only show it during printing:
<div>
<ul>
<li>
<span style="font-size: 1.25em;">
<strong>#dateformat(startdate, "mm-dd-yyyy")# - #dateformat(enddate, "mm-dd-yyyy")#</strong>
</span><br/><br/>
#fullLeft(stripHTML(details),30)#
</div>
<div style="display:none;" class="completedata" align="left">
#details#
</div>
<li>
</ul>
</div>
$(window).load(function() {
$('li').each(function () {
$(this).css({
"page-break-after": "always"
});
$(".completedata").css('display','block');
window.print();
});
});
The issue arises when I try to cancel the printing process after seeing the hidden display data as block, which remains visible on the screen as well.