Hide/show divs when printing to printer

Question

Is it possible to click on a button/image/link on a page and include/exclude other elements from being printed? (on an actual printer) I'd like to give the users the selection of which elements to print. Is this feasible with jQuery of Javascript?

Edited for better understanding: I'd like to let the user choose which parts of the page he wants to print by adding a print this/don't print this button next to each div, overriding the default settings i've set in my print.css file.

Update: After Richard Neil Ilagan's suggestion, i've tried the following and I feel I'm close but cant nail it. Any suggestions?

<style type="text/css">
@media print { 
    .no-print { display:none; } 
}
</style>

<script>
$(document).ready(function() {
    $('.dontPrint').click(function() { $('maybe').addClass('no-print'); });
});
</script>

<img class="dontPrint" src="images/cancel.png" title="Dont print bla bla" /></a>
<div id="maybe">bla bla</div>

Answer 1

Yes. You can do that by using CSS's @media print media type selector. Example (hide all inputs when printing):

@media print {
    input {
        display: none;
    }
}

As a design pattern, you may combine print media selector with the rest stylesheets to achieve toggle effect.

HTML:

<div class="for-screen">
    <input type="submit" value="Shown when not printing">
</div>
<div class="for-print">
    <p>Shown instead when printing</p>
</div>

CSS:

.for-screen {display: block;}
.for-print {display: none;}

@media print {
    .for-screen {display: none;}
    .for-print {display: block;}
}

More stuff on the matter:

• Media types on CSS2 standard
• CSS Design: Going to print (alistapart.com)