CODEWITHSUNDEEP
javascriptjqueryhtmlcss
J. A
J. A

Reputation: 37

Toggle for a div containing another html page

Been trying to make a button which opens a div containing another html page. I had the button working but the main page was opening with the div shown already, I needed it hidden. After messing it all up I'm stuck on this. The button doesn't work.

html 

<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;
}

js

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

Fiddle

Any help, what I'm I doing wrong? And is this even possible.

Thanks, got it working in the end by moving the script into tag.

Upvotes: 0

Views: 1106

Answers (3)

nshah143
nshah143

Reputation: 559

Check out the working demo here - http://jsfiddle.net/x2qjdfwk/ The only change is to remove the show() function from the button as you are already applying the jQuery click event to it.

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

And make sure you include the jQuery library.

Upvotes: 0

user-4653387
user-4653387

Reputation: 315

html: 

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

js:

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

css:

div {
    height: 100%;
}

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

js fiddle: http://jsfiddle.net/SsJsL/

Upvotes: 0

Deepanshu Gupta
Deepanshu Gupta

Reputation: 240

Try This code:

HTML:

<p>Press 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();
});

Demo is here:

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

Upvotes: 2

Related Questions