T.Doe T.Doe - 1 month ago 7
HTML Question

How to embed video within a javascript slidetoggle

I'm attempting to achieve a javascript slide toggle with a youtube video embedded after the text once the button is clicked but it just won't work. Does anyone know what I'm doing wrong?

HTML:

<h2> What Is Black Ballad? </h2>
<p> This is some text. </p>
<p class="reveal1">
This is some more text and then an embedded video.
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
</div>
</p>
<div id="more1" align="center" title="View More">
<img src="http://www.blackballad.co.uk/wp-content/uploads/2016/10/drop.png" width="20px" height="20px">
</div>


JavaScript:

$(document).ready(function(){
$("#more1").click(function(){
$(".reveal1").slideToggle("slow");
});
});


CSS:

.reveal1 {
display: none;
}

Answer

Fixed it by changing the javascript command to the following:

$(document).ready(function(){
  $("#more1").click(function(){
      $(".reveal1").slideToggle("slow");
      $(".video-container").slideToggle("slow");
  });