modal with accordion

by Igor Cuckovic

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Accordion - Collapse content</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <!--     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

    <script>
      $(function() {

        var videoPlaying = 0;


        $('#ex1').on($.modal.BEFORE_CLOSE, function(event, modal) {
            console.log("modal closed")
/*             $("#accordion").accordion({
                active: false
            
            }); */
            $('.video').trigger('pause');
            //$('#videoActivation').text("Click here to watch the video");
            //videoPlaying = 0;


        });

      $("#accordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content",
        activate: function(event, ui) {

          if (!videoPlaying) {
            $('.video').trigger('play');
            $('#videoActivation').text("Click here to close the video");
            videoPlaying = 1;
          } else {
            $('.video').trigger('pause');
            $('#videoActivation').text("Click here to watch the video");
            videoPlaying = 0;
          }



          console.log("activate")
        }
      });
      });

    </script>
  </head>

  <body>

  


  <div id="ex1" class="modal">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et neque...

CSS

video {
  background: transparent url("https://www.fillmurray.com/g/500/300") 50% 50% / cover no-repeat;
}