S2370268 - Text Highlighter 2017

by dixalex

HTML

<div class='highlightContainer'>
    <b class='reflow'>Forgetfulness:</b> <span class='reflow'>people do not always remember to complete their health treatments.</span>
    <ul class='main_text'>
        <li class='reflow'>Remember, the complete shingles protection of your Vaccine X vaccine only happens with the second dose.</li>
        <li class='reflow'>It’s time for the second dose of your Vaccine X vaccine. Make sure you receive maximum prevention against shingles.</li>
        <li class='reflow'>Taking the second shot of your Vaccine X vaccine is as important as taking the first one. </li>
        <li class='reflow'>You will only have the complete 90% protection Vaccine X can provide against shingles if you take the second dose.</li>
        <li class='reflow'>Vaccine X is a 2-dose series, so make sure you don’t forget the second dose.</li>
        <li class='reflow'>Vaccine X is a 2-shot shingles vaccine, so make sure you come back for the second shot. </li>
        <li class='reflow'>Putting your second shot of Vaccine X on the top of your to do list will help ensure you receive maximum immunization against shingles.</li>
    </ul>
</div>

CSS

.highlightContainer {
    background-color: #FFF;
    padding: 15px;
}

span.highlightable {
    border: 1px solid #FFF;
    margin-bottom: .75px;
    line-height: 1.3em;
}

span.highlightable:hover {
    border: 1px solid red;
    cursor: pointer;
    margin-bottom: 2.75px;
}

ul.main_text {
    list-style-type: none;
    margin: 0;
    padding-left: 15px;
}

ul.main_text > li {
    text-indent: -5px;
    margin-bottom: 5px;
}

ul.main_text > li:before {
    content: "-";
    text-indent: -5px;
}

.reflow {
    font-family: arial;
    font-size: 1.13em;
}

span.active,
span.active:hover {
    border: solid 1px green;
}

span.active {
    background-color: yellow;
}

JavaScript

$('.reflow').each(function(i, el) {
    var words = $(el).text().split(" ");
    $(el).empty();
    $.each(words, function(i, v) {
        $(el).append($("<span class='highlightable inactive'>").text(v + " "));
    });
});

$('.highlightable').each(function(i, el) {
    $(el).on('click', function(e) {
        var targetSpan = e.target;
        $(targetSpan).toggleClass('active');
    });
});