Here is the demo
HTML:
<button id="myButton" class="videoHidden">Play Video</button>
<div id="videoWrap">Video is here</div>
CSS:
#videoWrap {
width: 150px;
height: 100px;
background-color: #9ff;
display: none;
}
JavaScript:
$(document).ready(function(){
$('#myButton').click(function(){
var $this = $(this);
$("#videoWrap").fadeToggle();//or .toggle() for instant showing/hiding
$this.toggleClass('videoHidden');
if($this.hasClass('videoHidden')){
$this.text('Play Video');
} else {
$this.text('Hide Video');
}
});
});
So:
- Once document is loaded, you have a button which has "Play Video" text and "videoHidden" class
- When you click on the button, it toggles "videoHidden" class on the button (adds if not exists or removes if exists). It helps you to save some "state" of video playing.
- Then you use current "state" to change button's text to corresponding value ("Play Video" if video isn't playing, "Hide Video" if video is playing)
Edited
There is an error here http://biready.visseninfinland.nl/testing-2/:
At line 467 there is erroneous script
<script>
$('#myButton').click(function(){
var $this = $(this);
$("#videoWrap").slideToggle();</p>
<p> $this.toggleClass('videoHidden');</p>
<p> if($this.hasClass('videoHidden')){
$this.text('Play Video');
} else {
$this.text('Hide Video');
}
});
</script>
You should remove </p>
and <p>
from it
Edited 2
The last version of script (need to perform attaching handler within $(document).ready()
):
$(document).ready(function(){
$('#myButton').click(function(){
var $this = $(this);
$("#videoWrap").slideToggle();
$this.toggleClass('videoHidden');
if($this.hasClass('videoHidden')){
$this.text('Play Video');
} else {
$this.text('Hide Video');
}
});
});