Stack Apps is a question and answer site for apps, scripts, and development with the Stack Exchange API. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Update - read me:

This script is no longer required, thanks to the new Badges page. You can now view your earned and unearned badges by clicking the appropriate tab; without the need for an additional user-script.


Inspired by this Meta SO question, this user script adds a checkbox to the Badges page to allow you to hide badges you've already attained, so you can easily see which remain.

The checkbox's setting is persistent (that is, its state is saved); and each Stack Exchange site holds its own setting too, so you can have site-specific settings.

This also works when browsing the Gold, Silver, Bronze, and Tags tabs.


— Before —

— After —

Installing: Firefox

  1. Install Greasemonkey
  2. Click to install the script

Installing: Chrome (with Tampermonkey)

  1. Click to install the script

Installing: Chrome (no Tampermonkey):

  1. Copy the code below and save it to a file called anything.user.js
  2. In Chrome, go to Tools > Extensions
  3. Open the folder you saved the script to and drag it on to the Extensions dialog.

Source code

// ==UserScript==
// @name        Hide badges I've already attained
// @description Adds a checkbox to the Badges page to optionally hide badges you've already attained, from the list
// @namespace
// @version     1.0
// @grant
// @include     http://**
// @include*
// @include*
// @include*
// @include*
// @include*
// @include*
// @include*
// @include*
// @include*
// ==/UserScript==

// Vars
var attained = document.getElementsByClassName('badge-earned-check');

// Checks whether a toggle state is saved
function exists()
    return document.cookie.indexOf('badgehider_' + + '=') >= 0;

// Gets the toggle state
function get()
    for(var i = 0; pair = document.cookie.split('; ')[i].split('='); i++)
        if(pair[0] == 'badgehider_' +
            return unescape(pair[1]) === '1';

    return false;

// Sets the toggle state
function set(shown)
    document.cookie = 'badgehider_' + + '=' + (shown ? '1' : '0');

// Toggles the toggle state & hides/shows rows
function toggle()
    var state = get();

    for(var i = 0; i < attained.length; i++)
        attained[i] = state ? 'table-row' : 'none';


// Set the default toggle state

// Setup the container
var span = document.createElement('span'); = 'left';

// Setup the toggle box
var box = document.createElement('input');
box.onclick = function(){ toggle(); };
box.checked = get() ? 'checked' : null; = 'badgehider';
box.type = 'checkbox'; = 'pointer';

// Setup the label
var label = document.createElement('label');
label.innerHTML = " Hide badges I've already attained";
label.setAttribute('for', 'badgehider'); = 'pointer';

// Write out

// Box already checked from before
    for(var i = 0; i < attained.length; i++)
        attained[i] = 'none';
share|improve this question
Note: This script is no longer necessary, thanks to the new badges page – Cody Guldner Jun 18 '13 at 22:24
@CodyGuldner Nice! This also [status-complete]'s my feature request on Meta: Checkbox to hide badges I already have – Danny Beckett Jun 18 '13 at 23:56

You must log in to answer this question.

Browse other questions tagged .