Question

I’m using a simple toggle of the CSS display attribute from none to block in a FAQ page. However, I want the page to show everything when printing. What happens now is if you go to the page and go to print mode, it’ll open all the closed items since I added this code to my print.css stylesheet…

.faq
{
    display:block;
}

However, if you open an item, close it again, and then go to print mode, that item will remain closed.

My JS code looks like this…

` var divNum = new Array(“faq1”, “faq2”, “faq3”, “faq4”, “faq5”, “faq6”, “faq7”, “faq8”, “faq9”, “faq10”, “faq11”, “faq12”, “faq13”);

function openClose(theID) {
    for (var i = 0; i < divNum.length; i++) {
        if (divNum[i] == theID) {
            if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }
            else { document.getElementById(divNum[i]).style.display = "block" }
        }
    }
}`

and the HTML looks like this

<a class="faq" onClick="openClose('faq1')">Question?</a><br />
<p id="faq1" class="faq">Answer</p>

What can I do to make sure everything is opened when I go into print mode?

Answer 1

Instead of manipulating the display status of an element directly with your JS code, I would have classes defined in CSS then simply toggle the classes using JS.

If your classes are defined for @media screen only then you won’t have to worry about what the current display status is of any of the FAQ entries.

EDIT: For example, in your CSS file:

@media screen .faq.open {
display: block;
}

@media screen .faq {
display: none;
}

Then your JS would look like:

function openClose(theID) {
    for (var i = 0; i < divNum.length; i++) {
        if (divNum[i] == theID) {
            if (document.getElementById(divNum[i]).className.match(new RegExp('(\\s|^)open(\\s|$)'))) { document.getElementById(divNum[i]).className = ele.className.replace(new RegExp('(\\s|^)open(\\s|$)'), ' '); }
            else { document.getElementById(divNum[i]).className += " open" }
        }
    }
}

Note, I haven’t tested this so there may be some syntax errors. Also, most of my projects already include jQuery so the method I typically use is much cleaner code. I have not used jQuery here because you didn’t use it in your code samples.