Page that changes layout when a button is clicked

Design help General
1

Right now I have a homepage called ‘gateway’ that has a button that says ‘click to enter’.

When clicked, it redirects to the page ‘jxnte’, like it should.

But I want to eliminate the page changing. I want the button to change the layout of the page so that it looks like the page ‘jxnte’ but is still the page ‘gateway’.

How can I achieve this?

Here is my read-only: https://preview.webflow.com/preview/jontes-blank-site?utm_medium=preview_link&utm_source=designer&utm_content=jontes-blank-site&preview=c876d8d37998f7e52a94fe65c00c20ea&workflow=preview

2

Two approaches you could research would be to IFRAME the content or load it with AJAX. Webflow currently has JQuery loaded on all projects already if you are going down the AJAX path.

3

I’ve been doing research about AJAX all day today, I can’t seem to wrap my head around it. Could you give me some kind of guidance as to what I should put in my custom code?

4

Code that depends on jQuery is typically loaded in the before body custom code area. See Custom code in head and body tags | Webflow University

5

I know where to put it, I was just wondering if you could please take a look at this.

jQuery(document).ready(function(){
function processAjaxData(response, urlPath, filename){
document.title = response;
window.history.pushState(filename,response, urlPath);
}

jQuery( “.click-to-load” ).on( “click”, function(e) {
e.preventDefault();
processAjaxData(‘jxnte’, ‘/jxnte’, ‘jxnte’);
}

What am I missing?

6

Look at the example given in the JQuery docs. See → .load() | jQuery API Documentation

7

I found this lesson that might be useful: Show and hide elements on click