accordion and toggles – open when printing – how to

this is not a question but a “how to” documentation

I am using shortcodes ultimate to fill in the missing accordion / toggle shortcodes.

for a toggle you simply call [su_spoiler title=”xxxx”] …… [/su_spoiler]

now I want my (default closed) toggles to be open when printing the page. Here is the code that you put into the child-themes / styles.css or in the shortcodes CSS options.

use the following CSS:

@media print {
.su-spoiler.su-spoiler-closed > .su-spoiler-content {
height: auto;
padding: 14px;
overflow: visible;
opacity: 1;
}
.su-spoiler.su-spoiler-closed.su-spoiler-icon-plus .su-spoiler-icon:before {
content: ‘\f068’;
}
}

Vladimir writes also: I’d recommend adding the code above to the Custom CSS code field at the plugin settings screen (Dashboard – Shortcodes – Settings).

in addition I use following trick to stay text-compatible with my former themes, where I had the shortcode [toggle] available.

i put in my own function.php following code that creates shortcodes [toggle] / [toggle1] / [toggle2] …..
(so I can have nested toggles)

this short function remaps [toggle] into [su_spoiler] which “shortcodes ultimate” wants to see to give me the toggle

function toggle_function($atts, $content=null){
extract( shortcode_atts( array(
‘title’ => ”,
‘class’ => ”,
), $atts ) );

// $s = ‘[accordion openall=”false” clicktoclose=”true”][accordion-item title=”‘ . $title . ‘”]’ . $content . ‘[/accordion-item][/accordion]’; –> this is the right line for plugin “WordPress Accordion”
// this is now the code for shortcodes ultimate
$s = ‘[su_spoiler style=fancy class=heli_su_toggles title=”‘ . $title . ‘”]’ . $content . ‘[/su_spoiler]’;
return do_shortcode($s);
}
add_shortcode (‘toggle’,’toggle_function’);
add_shortcode (‘toggle1′,’toggle_function’);
add_shortcode (‘toggle2′,’toggle_function’);
add_shortcode (‘toggle3′,’toggle_function’);
add_shortcode (‘toggle4′,’toggle_function’);

• This topic was modified 6 years by HeliR.