Владимир

Первый ответ повеселил, вспомнил эту фразу, она в начале всех книг 2000-х годов по вебу была. Однако по теме, единственный вариант делать что то зависящие от страницы и ее состояния на чистом css это попробовать поиграться с якорями и стилями для активных элементов.

Приз говнокод года ваш однозначно, а проблема в том что переменные x и y у вас определены до обработки клика и потом не изменяются, и даже то что вы меняете переменные num и numm ничего не даст вам, так как x и y останутся прежними. Вот вы и постоянно добавляете одни и те же переменные в свой transform

Псевдокласс :focus, плюс знание о том, что это не свойство border, а outline, если не знакомы с outline: htmlbook.ru/css/outline

Ну вообще есть специальное свойство
https://developer.mozilla.org/ru/docs/Web/API/Elem...
То есть если текст в одну строку, и какая-то часть скрыта скажем overflow, то это свойство вернет именно ширину всего контента.

На мой взгляд лучше всего так, отдельный класс кнопке скрытия и отдельный класс блоку который будет скрываться, вот пример: https://jsfiddle.net/ngdxcob8/
И он будет работать на любом уровне вложенности.