Button to open another code on the same page-CodePudding

I need to create a demo of google search on Confluence so the code is in the HTML macro. Currently my code is:

<div id="central"> <img src="https://www.google.com/images/srpr/logo5w.png" title="Google"> 
<form>
<input type="text" title="Search" value="For example, WordPress hosting"> 
<input type="submit" onclick="window.open('my url')" value="Google Search" /> 
<input type="submit" onclick="window.open('my url')" value="I'm feeling lucky" /> 
</form> 
</div>

Now if the user clicks on the Google search or I'm feeling lucky "buttons" they are redirected to the search results or the page I need.

Is it possible to make another code open on click on the same page? Like the fake search results with only the links I need for the demo. And for me, the issue is that the code should be placed in the same HTML macro on Confluence and I cannot create other documents.

CodePudding user response：

Yo can simply use a javascript toggle

HTML

<div id="central"> <img src="https://www.google.com/images/srpr/logo5w.png" title="Google"> 
<form>
<input type="text" title="Search" value="For example, WordPress hosting"> 
<input type="button" onclick="myFunction()" value="Google Search" /> 
<input type="button" onclick="myFunction()" value="I'm feeling lucky" /> 
</form>
</div>
<div id="myDIV" style=" display: none;">
This is a DIV element.
</div>

CSS

.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
}

JavaScript

function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}