Switch to reveal a div that holds a different HTML page

Question

Switch to reveal a div that holds a different HTML page

I've been struggling to create a button that opens a div containing another HTML page. Initially, the button was working but the main page was opening with the div already visible, when I needed it hidden. Now, after making some changes, the button is not functioning at all.

Here's my code:

<p>Press the button</p>
<button id="button1" onClick="show()">Show / Hide</button>
<div id="Ahover">
    <object type="text/html" data="http://validator.w3.org/"></object>
</div>

CSS:

#Ahover {
    display:none;
    overflow: hidden;
    border:1px ridge blue;
}
object {
    width:760px;
    height:600px;
}

JavaScript:

$('#button1').click(function(){
   $('#Ahover').toggle() 
});

Link to Fiddle

I could use some help figuring out what I'm doing wrong. Is this even possible to accomplish?

Update: Managed to get it working in the end by moving the script into the <head> tag.

javascript jquery html css

Answer 1

Answer №1

Give this code a try:

HTML:

<p>Click the button</p><button id="button1">Show / Hide</button>
<div id="Ahover"> 
<object type="text/html" data="http://validator.w3.org/" >
</object></div>

CSS:

#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px; 
display:inline-block
}

JS:

$('#button1').on('click',function(e){
 $('#Ahover').toggle();
});

Check out the demo here:

https://jsfiddle.net/Dee0565/aaqfykz3/2/

Answer 2

Give this code a try:

HTML:

<p>Click the button</p><button id="button1">Show / Hide</button>
<div id="Ahover"> 
<object type="text/html" data="http://validator.w3.org/" >
</object></div>

CSS:

#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px; 
display:inline-block
}

JS:

$('#button1').on('click',function(e){
 $('#Ahover').toggle();
});

Check out the demo here:

https://jsfiddle.net/Dee0565/aaqfykz3/2/

Answer 3

Answer №2

Here is the HTML code:

<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>

This is the JavaScript code:

$('#button1').click(function(){
$('#Ahover').toggle();
 $("#Ahover").html('<object data="http://validator.w3.org/" />');
});

Here are the CSS styles:

div {
    height: 100%;
}

object {
    width: 100%;
    min-height: 100%;
}

You can view this on JS Fiddle by clicking here.

Answer 4

Here is the HTML code:

<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>

This is the JavaScript code:

$('#button1').click(function(){
$('#Ahover').toggle();
 $("#Ahover").html('<object data="http://validator.w3.org/" />');
});

Here are the CSS styles:

div {
    height: 100%;
}

object {
    width: 100%;
    min-height: 100%;
}

You can view this on JS Fiddle by clicking here.

Answer 5

Answer №3

Take a look at the demonstration in action by visiting this link - http://jsfiddle.net/a1b2c3d4/ The only adjustment needed is to eliminate the show() function from the button since you have already applied the jQuery click event to it.

<p>Click on the button</p><button id="button1">Display / Conceal</button>

Don't forget to include the jQuery library as well.

Answer 6

Take a look at the demonstration in action by visiting this link - http://jsfiddle.net/a1b2c3d4/ The only adjustment needed is to eliminate the show() function from the button since you have already applied the jQuery click event to it.

<p>Click on the button</p><button id="button1">Display / Conceal</button>

Don't forget to include the jQuery library as well.

Switch to reveal a div that holds a different HTML page

Answer №1

Answer №2

Answer №3

Similar questions

Loading Webfonts Asynchronously in NextJS Using Webfontloader

Creating an adaptable CSS triangle for an image

A comprehensive guide on transferring user input onto a php text file

the object '[object Object]' of a distinct supporting nature

Looking to verify an "else" condition within an alert in ReactJS?

What is causing the resistance in changing the color of my current navigation items?

What is the best way to convert and update document fields in MongoDB to GeoJSON format using Java?

Tips for changing a fullscreen HTML5 video appearance

Function for when Tic Tac Toe results in a tie

Display the most recent information from a MySQL table instantly using jQuery after the data has been updated

0 situation where using an empty value with PHP SESSION

Is it possible to use Javascript to query the neo4j database?

Enhancing the Efficiency of Android Programming

Aligning the navigation links vertically

Difficulty arising from the final column of average sums - Information extracted from JSON using Angular JS

Why isn't this code from CodePen functioning on my local server?

Errors during the compilation of Webgl shaders in the Google Chrome browser

Unusual express middleware usage in NodeJS

Split the input string into individual characters for each entry

How can the client obtain the JWT from the server after it has been retrieved from the API?