Switch Web Page into Document Mode on Click Using jQuery

Have you noticed that some websites have a button to switch their web page into document mode to make the article easy reading for users eyes. We are going to implement that functionality using jQuery and CSS.



Lets say we have a web page that contains an article, header, footer and sidebar etc. like below.

 <title>Switch Web Page into Document Mode on Click Using jQuery</title>
//assume header, sidebar and other elements is there
 <button id="docEnable">Document Mode</button>
 <div id="container">
 <div class="primary-content">
//texts and images
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 //code here

See there is a button with the id “docEnable”. When it is clicked, we need to hide all other elements and change the style of the div with the class name “primary-content” to make it easily readable.


                    //adding a class to main article div to style it using css
                    //detach main article div and button
                    var article = $(".primary-content").detach();
                    var button = $(this).text('Normal Mode').detach();
                    //all elements will be overwritten with main article div and trigger button

First we need to check whether the button has the class name “toggled“. If yes we need to refresh the page otherwise we need to add the same class name to the button and detach the button and .primary-content div. Then using .html() function we can attach these elements to body so that the other elements will be overwritten.

When a user click the #docEnable button while they are in document mode the page will be refreshed so that everything will be back to its position.


    margin: 0 auto;
    width: 600px;
    float: none;
    background: #fdfdfd;
    color: #333333 !important;
.docuOn a{
    color: #333;
.docuOn *{
    background:none !important;
    color: #333333 !important;

For this tutorial, I have changed the main article div and its children’s border, background to make it easily readable and position it in the middle to give it a document mode style. You can style it as per your own taste.

Try it and Give your feedback in the comment section below.

Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *