Question

I wondered if anyone can help me out – I’m attempting to load a video into the page using jQuery on clicking a button with the class ‘toggle’. And on a second click I would like the video to be removed – effectively toggling between append and remove.

Here’s the code so far – as it stands the toggle button just continues to add more instances of the video. I realise there’s no toggle function in there so far, and hoped someone could shed some light on the best way of achieving this. I’m still learning jQuery 🙂

$(function(){
    $('.toggle').click(function(e) {
    e.preventDefault();
    var content = '<video id="my_video"><source src="animation.mp4" type="video/mp4"/></video>';
    $('#videowrapper').append(content);
    _V_('my_video', {'controls': true});
    });
});

Many thanks in advance for any help!

Answer 1

 $('.toggle').click(function(e) {
    e.preventDefault();
    if ($('#my_video').length) {
        $('#my_video').remove();
    }
    else {
        var content = '<video id="my_video"><source src="animation.mp4" type="video/mp4"/></video>';
        $('#videowrapper').append(content);
        _V_('my_video', {'controls': true});
    }
});