jQuery toggling highlight on/off

by Akram kamal

HTML

<div id="header">
    <h1>Jaguar Partners with Tile</h1>
    <h2> to make sure drivers never leave without their wallets.</h2>
    <hr>

    <button id="toggleHighlight">Highlight</button>
</div>
<div id="content">
    <h5>The Big Announcement</h5>
    <p>Automaker Jaguar Land Rover Ltd. today announced a partnership with Silicon Valley startup Tile Inc. to prevent drivers from leaving home, or any other place, without their essential personal items.<span class="hl"> Tile, which has raised $16 million in total venture funding to-date, makes small, waterproof tags that employ Bluetooth low-energy radio and GPS technology to locate objects to which they are affixed. </span>        Typically, users put Tiles on key fobs, wallets and purses, smartphone and laptop cases, gym bags and luggage.When users lose track of something that’s tagged with a Tile, they can fire up the company’s mobile app to see if the item is within
        about a 100-foot range. If yes, they can make the Tile beep to guide them to items hidden from plain view. </p>

    <p>According to Tile CEO and co-founder Mike Farley, the company has shipped more than 5 million of its tags to customers so far, who often buy four at a time. <span class="hl">Tile sales hit $43 million in 2015, he said, and the company expects to double that this year at least. Apple, Best Buy, Lowe’s and T-mobile stores are among retailers selling Tile.</span>        Users have tracked items in Antarctica and outer space with Tile, Farley said. The company locates half-a-million objects daily or more. The partnership marks the first such engagement for Tile, Farley said. It is non-exclusive, and Tile is hoping
        to become part of the app layer in the connected cars market, more broadly.Competitors like TrackR and newcomers like Trakkies may try to follow suit. But it remains to be seen how much integrations will drive sales or engagement for makers of
        tags that bring locate-ability to everyday objects.</p>

   ...

CSS

body {
    font-family: Helvetica;
    background-color: lightblue;
}

h2 {
    font-family: arial;
    color: navy;
    font-style: italic;
}

h5 {
    font-family: arial;
    color: navy;
}

h1 {
    font-family: arial;
    color: navy;
}

.highlightable {
    background-color: #7F7F7F;
    font-style: italic;
    color: white;
}

p {
    font-family: arial;
    color: darkslategray;
}

JavaScript

$(document).ready(function() {
    //Select button and set click function
    $("#toggleHighlight").click(function(e) {
        $('span.hl').toggleClass('h1 highlightable');
        //if button text = Highlight


        if ($(this).text() == "Highlight") {

            $("#toggleHighlight").text("Unnnn-Highlight");

        } else {
            //Remove highlighted text - revert button text
            $("#toggleHighlight").text("Highlight");
        }
    });


}); // end ready