JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<div id="staticDisplay" class="w33"> <a class="more" href="#displayMore">                    
                <img alt="image" src="img/hearVimeoImg.png"/>               
                <span>
                    Watch Video<img alt="arrow" src="img/next_arrow.png"/>
                </span>
            </a>

    <!-- Visual box ends here -->
    <div id="displayMore" class="displayVideo w33"> <a href="#close" class="close"><img src="img/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>

         <h2>About the Higher Education Achievement Report</h2>

        <div id="popUpBody" class="w100">
            <iframe src="http://player.vimeo.com/video/50533056"></iframe>
            <p>HEAR Animation Transcript (DOCX, 26KB)</p>
            <p><a href="#Transcript" class="trans">View Transcript</a>
            </p>
            <p><a href="#">Download Transcript</a>
            </p>
        </div>
        <div id="transcript" class="displayTrans w25">
            <p>00:00
                <br />Lucy’s interviewing candidates for a new job. She’s finding it tough to decide on an application that stands out.</p>
            <p>00:07
                <br />Jack’s just graduated with a 2:1 in engineering, but so’s everyone else Lucy’s interviewing today.</p>
            <p>00:14
                <br />Jack took part in loads of activities at University. These experiences and challenges set him up for a great career, but how can he prove this?</p>
            <p>00:24
                <br />Lucy knows there’s more to Jack than his degree result, but where’s the evidence?</p>
            <p>00:29
                <br />Good news is that Jack has a HEAR - or: ’Higher Education Achievement Report’ - a new approach to recording student progression.</p>
            <p>00:36
                <br />A certificate on its own doesn’t express the rich experience a student gets in UK higher education.</p>
            <p>00:43
                <br />The HEAR is issued by...

CSS

.hidden {
                position: absolute;
                margin-left: -500em;
            }
            /*alternate .hidden*/
            /*.hidden { display: none}*/
            .w7, .w5, .w33, .w66, .w25, .w50, .w20, .w55, .w75, .w80 {
                float: left;
            }
            .w5 {
                width: 41.6667%;
            }
            .w7 {
                width: 58.3333%;
            }
            .w20 {
                width: 20%
            }
            .w25 {
                width: 25%
            }
            .w33 {
                width: 33.3333%;
            }
            .w50 {
                width: 50%;
            }
            .w55 {
                width: 55%;
            }
            .w66 {
                width: 66.6666%;
            }
            .w75 {
                width: 75%;
            }
            .w80 {
                width: 80%;
            }
            .w100 {
                width: 100%;
            }
            /* menu box */
            #staticDisplay {
                width:auto;
                height:auto;
                padding:25px 0px 0px 45px;
            }
            #staticDisplay .more {
                float: left;
                display: inline-block;
                position:relative;
                width:auto;
                height:auto;
                margin-left:35px;
            }
            #staticDisplay .more img {
                width:250px;
                height:150px;
            }
            #staticDisplay .more span {
                background-color: rgb(119, 3, 97);
                position: absolute;
                width: 100%;
                height: 25px;
                bottom: 0px;
                left: 0px;
            }
            #staticDisplay .more span img {
                width:25px;
                height:25px;
                float: right;
            }
            #staticDisplay a.more {
                text-align: left;
                color:...

JavaScript

$(document).ready(function () {
    $('a.more').click(function () {

        // Getting the variable's value from a link 
        var displayBox = $(this).attr('href');

        //Fade in the Popup and add close button
        $(displayBox).fadeIn(300);

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);
        return false;
    });

    //animate main displaybox double width, display transcript
    $('a.trans').click(function () {
        if ($('#transcript').is(':hidden')) {
            $('#displayMore').removeClass('w33');
            $('#displayMore').addClass('w66');
            $('#popUpBody').removeClass('w100');
            $('#popUpBody').addClass('w50');
            $('#transcript').show();
            $(this).text($(this).text() === 'View Transcript' ? 'Remove Transcript' : 'View Transcript');
        } else {
            $(this).text($(this).text() === 'View Transcript' ? 'Remove Transcript' : 'View Transcript');
            $('#transcript').hide();
            $('#displayMore').removeClass('w66');
            $('#displayMore').addClass('w33');
            $('#popUpBody').removeClass('w50');
            $('#popUpBody').addClass('w100');
        }
        return false;
    });

    // When clicking on the button close, or the mask layer, the popup will close
    //$('a.close, #mask').live('click', function() ~ .live is depreciated use .on()
    //$(document).on(event, selector, handler)
    //document - change to home_content when in cms
    //.on must be attached to an existing element to bind the event handler to, not a newly inserted element.
    //$(function() {
    $('body').on('click', 'a.close, #mask', function () {
        //$('a.close, #mask').on('click', function() {
        //ensures transcript view / remove says view when popout is opened again after closing
        $('a.trans').text('View Transcript');
        $('#transcript').hide();
        $('#mask, .displayVideo,...