Making hidden fields visible when printing


Okay, so I’m having some trouble with my site - basically, it’s hosted on a remote Capita system, which means I have very little control over the page itself. So in order to make it look a little better, I added my own CSS and HTML into the page with dropdowns and it worked great for half a year. However, Capita has recently done an update that means when I want to download a PDF of the page, it doesn’t show the information in the hidden dropdowns.

Could someone suggest what I can do to fix this? (Bearing in mind that my knowledge of Javascript, CSS and HTML is years old and fairly limited!)


Page that I want to change:

CSS file:

/*Intro text*/

.intro {
    padding: 10px 18px 10px 18px;
	margin-top: 5px;
	margin-bottom: 0px;
    background-color: white;

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #fff;
    color: #179aa2;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
	font-family: "Roboto Condensed";
    border: none;
    outline: none;
    transition: 0.4s;

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
	margin-top: 5px;
    background-color: white;
    display: none;
    overflow: hidden;
.responsive {
    width: 100%;
    height: auto;
@charset "UTF-8";
/* CSS Document */

I’m not sure you can change the display of hidden inputs with CSS.
All I can think of is to not use hidden, but add a class which is set to display: none in an @screen query.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.