In the past clients have requested this for their rates pages–they want only one rate accordion to be able to be printable at a time.
This requires a plugin, a print button that is clicked, and obviously an accordion. We also need to go through and make sure the print button doesn’t interfere with the accordion hiding when the actual body content is empty, just because the button is there.
How To
Script
Plugin
Grab the jquery.printarea.js file from here, and place it in your scripts > plugins folder.
Make sure the new plugin is included in your scripts.mustache - not necessarily required if your site is already on UAT, but highly recommended for local testing purposes.
Script.js part 1
Place the following script in your script.js, inside the large function.
// Print Click Functions
// ==================================================================================================================================
$('.print-panel').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).closest('.card-body').children('.content').printArea();
});
$('.print-blank').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).parents().siblings('.blank-main').printArea();
});
Script.js part 2
Place this script near the remove-blank function, since it’s doing basically the same thing but more specific. This will prevent print-able cards from showing when left empty, because it misunderstands the Print button as content.
$(".print-card.remove-blank").each(function() {
if (window.self !== window.top || $.trim($(this).find('.card-header .content').text()) || $(this).find('.card-header .content').has("img").length || $(this).find('.card-header .content').has("iframe").length || $.trim($(this).find('.card-body .content').text()) || $(this).find('.card-body .content').has("img").length || $(this).find('.card-body .content').has("iframe").length) {
//do nothing
} else {
$(this).remove();
}
});
HTML
An example accordion with the Print button included will look like this:
<div id="accordionGroup1">
<div class="card print-card remove-blank">
<div role="button" id="card1Name" class="card-header collapsed" data-toggle="collapse" data-target="#collapse1" tabindex="0" aria-controls="collapse1" aria-expanded="false">
<div data-content-block="accordionHeader1" data-content="content" data-editable="editable" class="content">
{{#page.accordionHeader1}}
{{& content}}
{{/page.accordionHeader1}}
<!-- @if NODE_ENV!='production' -->
<div>Accordion Title One</div>
<!-- @endif -->
</div>
</div>
<div id="collapse1" class="collapse" data-parent="#accordionGroup1" aria-labelledby="card1Name">
<div class="card-body content">
<div class="text-right mb-2">
<button type="button" class="print-panel btn btn-info">Print<span class="sr-only"> this panel</span></button>
</div>
<div data-content-block="accordionContent1" data-content="content" data-editable="editable" class="content">
{{#page.accordionContent1}}
{{& content}}
{{/page.accordionContent1}}
<!-- @if NODE_ENV!='production' -->
table or whatever goes here
<!-- @endif -->
</div>
</div>
</div>
</div>
<!-- add as many cards as needed -->
</div>
Dynamically add print buttons instead of using HTML
In this example, we are using script to inject the print button to each accordion instead of hardcoding it in the mustache template.
This includes an SVG icon (with currentColor as the fill to work with their DarkMode/LightMode toggle), but you could remove that or swap it to an image.
Visual example:
Exists on Capital Credit Union, but we’re using .accordions--red--body as the selector instead of .card-body. Capital is also using a conditional statement to check to see if the user is on a “rates” page before applying it.
There is also a template literal (from ES6) in here, so if you’re using gulp’s uglify, you will need to change it to terser.
let accordions = document.querySelectorAll('.card-body'); // Change this selector based on how your accordions are built.
accordions.forEach(function(element){
let button = document.createElement('button');
button.classList.add('print-panel');
button.setAttribute('type', 'button');
button.setAttribute('title', `Print the ${element.previousElementSibling.textContent} section`);
button.innerHTML = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="1000px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<g>
<rect x="320.3" y="137.9" class="st0" width="359.3" height="33.2" fill="currentColor"/>
<rect x="320.3" y="231.9" class="st0" width="359.3" height="33.2" fill="currentColor"/>
<rect x="320.3" y="746" class="st0" width="359.3" height="33.2" fill="currentColor"/>
<rect x="320.3" y="840" class="st0" width="359.3" height="33.2" fill="currentColor"/>
<path class="st0" d="M853.8,303.8h-58.1v-199c0-23.6-9.2-45.8-25.9-62.5c-16.7-16.7-38.9-25.9-62.5-25.9H292.8
c-23.6,0-45.8,9.2-62.5,25.9c-16.7,16.7-25.9,38.9-25.9,62.5v199h-58.1C67,303.8,2.5,368.2,2.5,447.5v243.2
C2.5,770,67,834.4,146.2,834.4h58.1v60.8c0,23.6,9.2,45.8,25.9,62.5c16.7,16.7,38.9,25.9,62.5,25.9h414.5
c23.6,0,45.8-9.2,62.5-25.9c16.7-16.7,25.9-38.9,25.9-62.5v-60.8h60.1v0c78.3-1.1,141.7-65.1,141.7-143.7V447.5
C997.5,368.2,933,303.8,853.8,303.8z M270.7,104.8c0-5.9,2.3-11.5,6.5-15.6c4.2-4.2,9.7-6.5,15.6-6.5h414.5
c5.9,0,11.5,2.3,15.6,6.5c4.2,4.2,6.5,9.7,6.5,15.6v199H270.7V104.8z M729.3,895.2c0,5.9-2.3,11.5-6.5,15.6
c-4.2,4.2-9.7,6.5-15.6,6.5H292.8c-5.9,0-11.5-2.3-15.6-6.5c-4.2-4.2-6.5-9.7-6.5-15.6v-199h458.7V895.2z M931.2,690.7
c0,42.7-34.7,77.4-77.4,77.4h-58.1V629.9H204.3v138.2h-58.1c-42.7,0-77.4-34.7-77.4-77.4V447.5c0-42.7,34.7-77.4,77.4-77.4h58.1
h591.4h58.1c42.7,0,77.4,34.7,77.4,77.4V690.7z" fill="currentColor"/>
<path class="st0" d="M806.4,436.4c-13.2,0-25.7,5.2-35.1,14.5c-19.3,19.3-19.3,50.8,0,70.1c9.4,9.4,21.8,14.5,35,14.5
c13.3,0,25.7-5.2,35.1-14.5c19.3-19.3,19.3-50.8,0-70.1C832.1,441.5,819.7,436.4,806.4,436.4z M818,497.6c-6.2,6.2-17,6.2-23.2,0
c-3.1-3.1-4.8-7.2-4.8-11.6c0-4.4,1.7-8.5,4.8-11.6c3.1-3.1,7.2-4.8,11.6-4.8c4.4,0,8.5,1.7,11.6,4.8
C824.4,480.8,824.4,491.2,818,497.6z" fill="currentColor"/>
</g>
</svg>Print<span class="sr-only"> the ${element.previousElementSibling.textContent} section</span>;
element.prepend(button);
});
}
Example Sites
Tags: tables, rates, bs3, bs4, accordion, print