ACLU - highlight words inline, with line breaks

by lasha

HTML

<p class="fancy"><span class="highlight fixed">
    <span class="selected">In 2010</span>
    <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
        </span>
    </span>, <span class="green">784</span> people —
    <br>of <span class="highlight fixed"><span class="selected">black and white</span>
        
        <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
            <span>contentttttttt</span><br>
            <span>content4</span><br>
            <span>content5</span><br>
            <span>content6</span><br>
            <span>content7</span><br>
            <span>content8</span><br>
        </span>
        
            </span> ethnicity in <span class="highlight fixed"><span class="selected">the United States</span>
        
        <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
            <span>content3</span><br>
            <span>content4</span><br>
            <span>content5</span><br>
            <span>content6</span><br>
            <span>content7</span><br>
            <span>content8</span><br>
        </span>
        
            </span> were arrested for marijuana possession. A <span class="highlight fixed"><span class="selected">black</span>
            <span class="dropdown-container">
            <span>content1</span><br>
            <span>content2</span><br>
        </span>
                
                </span> person was <span class="green">2.39</span> times as likely to be arrested <span class="highlight SPECIAL fixed">
                <span class="selected">for marijuana &nbsp;possession</span>
                <span class="dropdown-container">
                    <span>content1</span><br>
                    <span>content2</span><br>
                </span>
           </span>as a <span class="highlight">white</span> person.</p>

CSS

body {
    font-family: helvetica;
    line-height: 1.3;
    font-size: 40px;
    font-weight: 600;
}
p {
    position: relative;
    /* width: 545px; */
    width: 555px;
}
.green {
    color: #55dd55;
}
.highlight {
    background-color: #000;
    color: #000;
    //display: inline-block;
    /* padding: 0 6px; */
    padding: 0;
    font-weight: 100;
    -webkit-transition: color 2s ease-in-out;
}
.highlight.reveal {
    color: #fff;
}
.highlight.inline-block {
    display: inline-block;
    /* line-height: 37px; */
}
.dropdown-container {
    position: absolute;
    padding: 0 10px 5px 6px;
    display: none;
    background-color: #000;
}

JavaScript

$(function () {
    $(".fixed").each(function (i, el) {
        var $this = $(this);
        var $dropdownContainer = $this.find(".dropdown-container");

        if($this.hasClass("SPECIAL")){
            $this.find(".selected").html("&nbsp;" + $this.find(".selected").html());
            $this.after("&nbsp;");
            
            $this.css({
                //height: $this.height() - 6,
            });
        } else {
            $this.find(".selected").html("&nbsp;" + $this.find(".selected").html() + "&nbsp;");
            
            $this.addClass('inline-block').css({
                width: $this.width(),
                height: $this.height() - 6,
                    "line-height": $this.height() - 6 + "px"
            });
        }

        $this.on("click", function (i, e) {
            var $this = $(this),
                offset = $this.position();
            
            console.log("clicked");

            $dropdownContainer.css({
                top: offset.top + $this.height(),
                left: offset.left
            }).toggle();
        });
        
        $dropdownContainer.find("span").on("click", function(e){
            $this.find(".selected").text($(this).text());
        });
    });

    $(".highlight").each(function (i, el) {
        var $this = $(this);
        setTimeout(function () {
            $this.addClass("reveal");
        }, 1000);
    });
});