Last Updated: February 25, 2016
·
3.796K
· ofcourseitsdan

Bootstrap 3 Tabs (Print Friendly)

function print_tabs(){
    $(".example-tabs").each( function() {       
        var tabs_html = "";         
        $(this).find(".nav-tabs li").each( function(index, element) {           
            tabs_html += "<h2>" + $(this).text() + "</h2><br />";           

            tabs_html += $(".tab-content .tab-pane").eq(index).html() + "<br /><br />";         
        });

        $(this).after("<div class='print_friendly_tabs'>" + tabs_html + "</div>");          
    });
}

This code snippet will convert Bootstrap 3's tabs into HTML that can be printed in an organized way.

Then in the main stylesheet add this:

.print_friendly_tabs { display: none; } 

And this in your print stylesheet

.print_friendly_tabs { display: block; }

1 Response
Add your response

Didn't thought of this before. Nice!

over 1 year ago ·