JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<div id="container">
    <h1 id="testh">ADPR 1400 Notes</h1>
    <button id="onlyOTT">Show only OTT</button>
    <button id="showAll">Show all section</button>
    <section class="OTT">
        <h2>Four P's of Marketing</h2>
        <ol>
            <li>Product</li>
            <li>Place</li>
            <li>Price</li>
            <li>Promotion</li>
        </ol>
        <p>Advertising is a subset of promotion</p>
        <p>Customer is not part of the marketing mix</p>
    </section>
    <section class="OTT">
        <h2>IMC</h2>
        <aside>Info on page 9</aside>
        <p>Various elements used in various media to work individually and cumulatively to achieve the same marketing communication objectives</p>
    </section>
    <section class="OTT">
        <h2>Advertising Effectiveness</h2>
        <aside>Info on page 18</aside>
        <p>Reach/efficiency: Average 30 second prime time spot on 4 major networks = 5 million households [CPM = 22.73] (CPM - Cost per thousand)</p>
        <p>Brand building/brand equity</p>
    </section>
</div>

CSS

html {
        font-size:14pt;
        margin:0;
        padding:0;
    }
    body {
        padding:0;
        margin:0;
        position:relative;
    }
    h1, h2, h3, h4 {
        font-family:Helvetica, Arial, Sans-Serif;
    }
    p {
        line-height:1.3em;
    }
    p, a {
        font-size:0.95em;
        font-family:serif;
        color:#111;
    }    
    #container {
        width:520px;
        margin:0 auto;
        height:100%;
        background:#FFF;
        position:relative;
        padding:0 20px;
        
        -moz-box-shadow: 0px 0px 5px #000000;
        -webkit-box-shadow: 0px 0px 5px #000000;
        box-shadow: 0px 0px 5px #000000;
    }
    section {
        width:480px;
        padding:20px;
        overflow:hidden;
        margin-bottom:20px;
    }
    section h2 {
        line-height:1em;
        font-size:1.5em;
        padding:0 0 5px 0;
        margin:0;
        color:#000;
    }
    .OTT {
        background:#EEB4B4;
    }
    #infoBox {
        width:160px;
        background:#484848;
        position:fixed;
        margin-left:120px;
        top:200px;
        float:right;
        padding:20px;
        text-align:center;
        color:#FFF;
    }
    button {
        margin-bottom: 10px;
    }
    span {
        font-style:italic;
        text-decoration:underline;
    }

JavaScript

/* 
    * Hash for words and definitions
    * Keys are the words themelves
    * Values are the definitions for the words
    */
    var definitions = {
        "B2C2C" : "Business to Consumer to Consumer",
        "WOM" : "Word of Mouth",
        "CPM" : "Cost per Thousand",
        "IMC" : "Integrated marketing communications",
        "RFM" : "Recency, Frequency, Monetary Value",
        "marcom" : "Marketing communication"
    };
    /*
    * Pushes keys into an array for use later
    */    
    var keys = [];
    for (var l in definitions) {
        keys.push(l);
    }
    /*
    * For each value in the `keys` array go through the document
    * and search for it.
    * When it's found, wrap it in a <span> with a class the current
    * `keys` value
    */
    for(i = 0; i < keys.length; i ++) {
        $('section').find(":contains('"+keys[i]+"')").wrap('<span class="'+keys[i]+'">');
    }
    /*
    * When a <span> is hovered over get its `class`
    * Assign the `class` to variable `popup`
    * Variable `popdef` goes through `definitions` array
    * and finds the value
    * If `popdef` is defined then make a `popup` that
    * displays the word and definition (key + def)
    * After the hover is off the <span> destroy `infoBox`
    */
    $('span').hover(
        function() {
            var popup = $(this).attr('class');
            var popdef = definitions[""+popup+""];
            if(popdef != undefined) {
                var infoBox = $('<aside id="infoBox">'+popup+': '+popdef+'</aside>');
                infoBox.appendTo('body');
            }
        },
        function() {
            $(infoBox).remove();
        }
    );
    var winWidth = $(window).width();
    var offset = ((winWidth - $('#container').width())/4)-40;
    /*
    * When the `#onlyOTT` button is clicked
    * Hide all the sections without the `.OTT` class
    */
    $("#onlyOTT").click(function(){
        $("section").not(".OTT").hide();
    });
    /*
    * When the `#showAll`...