Stylesheet switcher button to toggle html when clicked (jQuery)?

Question

I have a button at the top of my page that enables the use of a separate stylesheet for printing, I have a normal print.css that enables everything when printing and I have a acrfprint.css which just prints certain elements out. Someone on here gave me some help getting this to work last week using the following JS:

<script>
$(document).ready(function(){
    $('#acrf').click(function(){
        $('link').first().removeAttr('href').attr('href', '_includes/css/acrfprint.css');
    });
});
</script>

This works perfectly but the only issue is that the button doesn't really give you any idea if the acrf-print.css has been enabled or how to disable it.

Basically the HTML I'm using it this:

<div id='acrfContaineroff'>
<button id='acrf' class='noPrint noPrint-acrf'>Enable Annotation Print Mode</button>
</div>

(I know I'm using ' instead of " but that's because it's nested in VBScript)

What I want to do is when the button is clicked, change the stylesheet to acrfprint.css and then display the following HTML instead

<div id='acrfContaineron'>
<button id='acrf' class='noPrint noPrint-acrf'>Disable Annotation Print Mode</button>
</div>

When the disable button is selected I want the css to return to print.css

Any help would be greatly appreciated.

Answer 1

Since your questions look like you just started with javascript.. maybe you should just change the button to a checkbox?

<div id='acrfContaineroff'>
<button id='acrf' class='noPrint noPrint-acrf'>Enable Annotation Print Mode</button>
</div>

into:

<div id='acrfContaineroff'>
<input type='checkbox' id='acrf' /> Enable Annotation Print Mode
</div>

and the javascript into:

<script>
$(document).ready(function(){
    $('#acrf').click(function(){
        if( $('#acrf').is(':checked') ){
            $('link').first().removeAttr('href').attr('href', '_includes/css/acrfprint.css');
        }else{
            $('link').first().removeAttr('href').attr('href', '_includes/css/print.css');
        }
    });
});
</script>