How to open current page in new tab and reveal hidden div

Question

Is it possible to click a button to open the same page in a new tab and reveal a hidden div that wasn't seen in the parent?

Currently I have a div called replacediv , that is being replaced with Replacement Text below when users click on the button...But it is being replaced in the parent. For my purpose, I would like to load this same page in a new tab, with the page content and the Replacement Text showing instead of the hidden replacediv .

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#replacediv").replaceWith("<span class='style'>Replacement Text</span>"); }); }); </script> 

 <div id="replacediv"></div> 

Answer 1

if you want the content of $("#replacediv") and the span in the same page not replacing one another you do this:

$(document).ready(function(){
 $("#replacediv").before("<span style="display:none;" class='style'>Replacement Text</span>");
        $("button").click(function(){
            $(".style").show();
        });
    });

Answer 2

I think one way to do it, is when you open the page and add a URL-parameter, which causes the page to render differently, eg to replace some text on it, with the Text in the URL-parameter. eg

On your page, you define something like this:

$(document).ready(function(){
    $("button").click(function(){
        window.open(window.location.href + '?replace=Replacement%20Text', '_blank');
    });

});

Additionally you need something like this (still in the same page, but active, only when called with a parameter)

$(document).ready(function(){
    $("button").click(function(){
        window.open(window.location.href + '?replace=Replacement%20Text', '_blank');
    });

    var arr = location.href.match(/replace=([^&]+)/)
    var replace = arr[1];

    if (replace != '') {
         $("#replacediv").replaceWith("<span class='style'>" + replace + "</span>");
    }
});

This version will leave your button still clickable. If you rather do not want a button, you need to ask for the URL parameter earlier and don't render your button in the first place. That is up to you.

Does it go in the right direction? Hope that helps.