JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
    <div class="arrow"></div>
    <h1 class="up">This is my Header!</h1>
</div>

CSS

.center {margin:1% 0; text-align: center;}

.arrow {
	border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    cursor: pointer;
    display: inline-block;
    height: 0;
    margin: 0;
    width: 0;
    border-top: 10px solid #aaa;
}

h1.up {
    text-transform: uppercase;
}

h1.down {
    text-transform: none;
}

JavaScript

$(".arrow").click(function() {
    if($("h1").hasClass("up")) {
       $("h1").removeClass("up");
       $("h1").addClass("down");    
    }
    else if($("h1").hasClass("down")) {
       $("h1").removeClass("down");
       $("h1").addClass("up");    
    }
});