JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="triangle1" id="triangle1" onclick="triangleChange1()"></div> 
<div class = "balance" onclick="triangleChange1()"> Student Card Balance </div><br>


<div class = "bID" id="bID"> $<?php echo $Balance;?> </div><br>

CSS

#triangle1{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
    }

JavaScript

function triangleChange1() {
	var x = document.getElementById("triangle1");
	
	var y = document.getElementById("bID");
	
  if (y.style.display === "none") {
	x.style.transform =  "rotate(180deg)";
    y.style.display = "block";	
  } 
  else {
	x.style.transform =  "rotate(180deg)";
    y.style.display = "none";
  }
}