Функция преобразования и курсор: указатель не работает

Question

Я пытаюсь сделать так, чтобы, когда пользователь нажимает на треугольник / текст рядом с ним, треугольник поворачивается и показывает переменную PHP под ним. Однако, когда я делаю это, он не работает и указатель курсора даже не появляется. Любая помощь будет оценена.

Спасибо, код ниже

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

.triangle1/*, .triangle2, .triangle3, .triangle4, .triangle5*/{ 
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-left: 14px solid #555;
	border-bottom: 6px solid transparent;
	margin-left: -25px;
	cursor: pointer;
	transition: 0.5s;
}

<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>

Answer 1

Я не вижу треугольную форму, но вы должны указать свойство размера для div, чтобы увидеть, я думаю, вы упускаете это.

function triangleChange1() {
  var x = document.getElementById("triangle1")

  var y = document.getElementById("bID")

  if (y.style.display === "none") {
    x.style.transform = "rotate(90deg)";
    y.style.display = "block";
  } else {
    x.style.transform = "rotate(-90deg)";
    y.style.display = "none";
  }
}

.triangle1
/*, .triangle2, .triangle3, .triangle4, .triangle5*/

{
  width: 30px;
  height: 30px;
  border-top: 6px solid transparent;
  border-left: 14px solid #555;
  border-bottom: 6px solid transparent;
  margin-left: 25px;
  cursor: pointer;
  transition: 0.5s;
  border: 1px solid red;
  background: teal;
}

<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>