如何打印隐藏的文章（Css / JQuery）

Question

I´d like to print an article which is hidden because of Javascript/Jquery. This is only a short snippet of the real code. In the real code there are button with who you can show the "class2". When you click, class1 is hidden and class2 is shown. When the user want to print he should be able to print all wether a class is hidden or not.

<article class="x class1">
        <section>
            <p>1</p>
        </section>
        <section>
            <p>1</p>
        </section>
    </article>
    <article class="x class2">
        <section>
            <p>2</p>
        </section>
        <section>
            <p>2</p>
        </section>
    </article>
    <script type="text/javascript">

            $(document).ready(function () {

                $(".x").hide()
                $(".class1).show()

            });
    </script>

Answer 1

See the fiddle: http://jsfiddle.net/vfub0d50/1/

<article class="x class1">
        <section>
            <p>1</p>
        </section>
        <section>
            <p>1</p>
        </section>
    </article>
    <article class="x class2">
        <section>
            <p>2</p>
        </section>
        <section>
            <p>2</p>
        </section>
    </article>

CSS

.hide{
    display: none;
}

    @media print {
        .class2 {
        display:block;    
        }
    }

jQuery

$(document).ready(function () {
    $(".class2").addClass('hide');
});

This works because I don't use .hide() and . show() which adds inline css and thus overriding every other possible style. This adds a class to hide a div . No inline css is added with this method.