<script>
var comp101_note = document.getElementById("comp101_note");
var comp101_pdf = document.getElementById("comp101_pdf");
comp101_note.onclick = function(){
comp101_pdf.slideToggle();
};
</script>
<html>
<table>
<tr><td>Ders</td></tr>
<tr><td id="comp101_note">COMP101</td></tr>
</table>
<object width="400" height="400" data="1.pdf" id="comp101_pdf"></object>
</html>
i want to do it like var etc. because of i will use these code in windows application
slideToggle is a jquery function so wrap comp101_pdf into a jquery object i.e., $(comp101_pdf).slideToggle();
You just can't use slideToggle directly. Either you have to do it using some javascript functionality. In case of Vanilla Javascript (plane javascript) we have to write whole animations on our own. So suggestion would be go with jQuery liberary. If you still don't want to go with jQuery then you have to go with CSS3 transition animation and change some property based on which transition will occur.
Both codes are as follows :
jQuery :
$('element selector class or id').slideToggle();
CSS3 Transition : HTML Code :
<div class='myClass'>Some Text</div>
CSS Code :
.myClass{height:0px;transition : height 1s linear;}
.myClass.mySlideOpen{height:100px}
Now if mySlideOpen is applied to myClass div then it's height will increase with linear animation with duration 1 second.
A) Use proper HTML structure (E.g ) B) Use jQuery to to quickly access objects and you must use "READY" C) You are executing your code before browser render your HTML in memory, that's why you need to follow section B D) You can't toggle tag, place them in DIV
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script>
$( document ).ready(function() {
// When document is fully loaded:
$( "#comp101_note" ).click(function() {
$('#comp101_pdf').slideToggle("fast", function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<table>
<tr><td>Ders</td></tr>
<tr><td id="comp101_note">COMP101</td></tr>
</table>
<div id="comp101_pdf">
<object width="400" height="400" data="1.pdf"></object>
</div>
</html>
slideToggle()is not a javascript function, it is from jQuery api.jquery.com/slidetoggle You should look at the browser console to see the errors