hide codeforces tags

by wilsjame

HTML

<div style="float: right; font-size: 1.1rem; padding-top: 1px; text-align: right;">
                        <a href="/problemset?tags=constructive+algorithms" style="text-decoration: none;" class="notice" title="Constructive algorithms">constructive algorithms</a>,
                        <a href="/problemset?tags=greedy" style="text-decoration: none;" class="notice" title="Greedy algorithms">greedy</a>
                </div>
                
<!-- <button id="toggle-button">Toggle tags</button> -->

JavaScript

let elements = document.getElementsByClassName('notice');

// add ID to all problem tags
for (let i = 0; i < elements.length; i++) {
	elements[i].style.visibility = 'visible';
  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';
  }
}





/*
let btn = document.createElement("button");
btn.innerHTML = '+';
btn.id = 'toggle-button';
document.body.appendChild(btn);

document.getElementById('toggle-button').addEventListener('click', function () { 
	toggle(document.getElementsByClassName('notice'));
});
*/


/*
function toggle (elements) {
  for (var i = 0; i < elements.length; i++) {
  	if (elements[i].style.visibility === 'visible') {
    	elements[i].style.visibility = 'hidden';
    }
    else {
    	elements[i].style.visibility = 'visible';
    }
  }
}
*/

/*
var elements = document.getElementsByClassName('notice');
for(var i = 0; i < elements.length; i++) {
	(elements[i].style.visibility = "visible";
}
*/