Some jQuery developers like to load external web pages into Div layers when visitors click on a link or button. The main advantage of loading external web pages may be that it can make the web page clean, simple and not congest.

This can be achieved by using the jQuery load() method which can load contents of external web page into a Div layer even without refreshing the current web page.

The following is a very simple example of loading external web pages into a Div layer when a button is clicked:

The jQuery codes are very simple:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Div Layer From Left To Right</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
                                     
        $(".loadPage1").click(function() {
                                        
            if ( $(this).is(".loadPage1") ) {
                
                // Load web page 1
                $("#pageContent1").load('example-1.html');
                
                // Toggle the class
                $(this).toggleClass("loadPage1 loadPage2")
                
            } else {
                
                // Load web page 2
                $("#pageContent1").load('example-2.html');
                
                // Toggle the class
                $(this).toggleClass("loadPage1 loadPage2")
            }
            
        });                         
             
    });
</script>
</head>

<body>

<h1>jQuery Animate Div Layer From Left To Right</h1>

<div id="frame">
    <div id="pageContent1"></div>
</div>

<div style="width:282px; text-align: center; margin-bottom:10px;">
    <input type="button" value="Click Here to Load Web Page" />
</div>

<div style="width:282px; text-align: center"></div>
</body>
</html>

This jQuery post discuss how to load external web page into a Div layer.