hide codeforces tags - problem page

by wilsjame

HTML

<div class="roundbox sidebox" style="">
            <div class="roundbox-lt">&nbsp;</div>
            <div class="roundbox-rt">&nbsp;</div>
        <div class="caption titled">&rarr; Problem tags
            <div class="top-links">
            </div>
        </div>
<div style="padding: 0.5em;">
    <div class="roundbox " style="margin:2px; padding:0 3px 2px 3px; background-color:#f0f0f0;float:left;">
            <div class="roundbox-lt">&nbsp;</div>
            <div class="roundbox-rt">&nbsp;</div>
            <div class="roundbox-lb">&nbsp;</div>
            <div class="roundbox-rb">&nbsp;</div>
<span class="tag-box" style="font-size:1.2rem;" title="Greedy algorithms">
    greedy
</span>
    </div>
    <div class="roundbox " style="margin:2px; padding:0 3px 2px 3px; background-color:#f0f0f0;float:left;">
            <div class="roundbox-lt">&nbsp;</div>
            <div class="roundbox-rt">&nbsp;</div>
            <div class="roundbox-lb">&nbsp;</div>
            <div class="roundbox-rb">&nbsp;</div>
<span class="tag-box" style="font-size:1.2rem;" title="Mathematics including integration, differential equations, etc">
    math
</span>
    </div>
    <div class="roundbox " style="margin:2px; padding:0 3px 2px 3px; background-color:#f0f0f0;float:left;">
            <div class="roundbox-lt">&nbsp;</div>
            <div class="roundbox-rt">&nbsp;</div>
            <div class="roundbox-lb">&nbsp;</div>
            <div class="roundbox-rb">&nbsp;</div>
<span class="tag-box" style="font-size:1.2rem;" title="Sortings, orderings">
    sortings
</span>
    </div>
    <div style="clear:both;text-align:right;font-size:1.1rem;">
            <span title="Problem should be solved" class="notice">No tag edit access</span>
    </div>
</div>
    </div>

JavaScript

let elements = document.getElementsByClassName('tag-box');

// add ID to all problem tags
for (let i = 0; i < elements.length; i++) {
	elements[i].style.visibility = 'hidden';
  let tag = elements[i];
  //elements[i].setAttribute('id', 'problem_tag_' + i);
  //let tag = document.getElementById('problem_tag_' + i);
  let button = document.createElement('button');
  button.type = 'button';
  button.innerHTML = '+';
  button.addEventListener('click', function() {
    console.log('hi');
    toggle(tag);
  });
  tag.insertAdjacentElement('beforebegin', button); // 'afterend' works too

}

function toggle(tag) {
  console.log('here');
  console.log(tag.style.visibility);
  if (tag.style.visibility === 'visible') {
    tag.style.visibility = 'hidden';
  } else {
    tag.style.visibility = 'visible';
  }
}