Menu icon Foundation
Print Responsive Accordion Tabs

So, I don't know if this will be helpful for anyone.  I thumbed through the code and found a cool way to swap the presentation of responsive accordion tabs:

$(window).on("beforeprint", function () {
    $("[data-responsive-accordion-tabs]").foundation("_handleMarkup", "accordion"); //Print!
}).on("afterprint", function () {
    $("[data-responsive-accordion-tabs]").foundation("_destroy").foundation();
}); //We have the technology, we can rebuild him

Essentially this swaps the presentation to accordion, at the cost of breaking the plugin.  The solution is to rebuild the plugin once complete.  I use a bit of print CSS to show the contents:

@media print{
  .accordion-item{
      break-inside: avoid; /*Keep dem tabs content together*/
  }
  .accordion-content{
      display:block!important; /* show the contents! */
  }
}

I don't know if this is best practice or not, but it seems to work in my initial testing.  I'd love to hear if anyone else has tackled this before.

Print ResponsiveAccordionTabs

So, I don't know if this will be helpful for anyone.  I thumbed through the code and found a cool way to swap the presentation of responsive accordion tabs:

$(window).on("beforeprint", function () {
    $("[data-responsive-accordion-tabs]").foundation("_handleMarkup", "accordion"); //Print!
}).on("afterprint", function () {
    $("[data-responsive-accordion-tabs]").foundation("_destroy").foundation();
}); //We have the technology, we can rebuild him

Essentially this swaps the presentation to accordion, at the cost of breaking the plugin.  The solution is to rebuild the plugin once complete.  I use a bit of print CSS to show the contents:

@media print{
  .accordion-item{
      break-inside: avoid; /*Keep dem tabs content together*/
  }
  .accordion-content{
      display:block!important; /* show the contents! */
  }
}

I don't know if this is best practice or not, but it seems to work in my initial testing.  I'd love to hear if anyone else has tackled this before.

vivek sharma over 1 year ago

 

[url=http://upstrackingpro.com/] UPS Tracking Store [/url][url=http://august2018calendar.info] August Calendar 2018[/url][url=https://june2018calendar.info/] June Calendar 2018[/url][url=http://fizziolo.gy/2018-year-planner-excel-word-pdf/] Download 2018 Year Planner[/url][url=http://july2018calendar.net/] July Calendar 2018[/url]