自分用メモ。
画像とテキスト（例えばアイコンとユーザ名）をまとめて一気に表示オンオフ切り替える方法について。
コード貼り付け作業ミニマムで済ますための単純なやりかた。
画像とテキストの組み合わせに限らず、どんな要素の組み合わせでもよい。

表示切替：
USER-ID ICON

表示場所：
hatenacinnamon jkondo naoya

ソースコード：

<style>
.icon {display:inline-block}
.hid {display:none}
</style>
<script>
function switch_display(show, hide) {
    var es = document.getElementsByClassName(show);
    for (var i=0; i<es.length; i++) {
        es[i].style.display = "inline-block";
    }
    var eh = document.getElementsByClassName(hide);
    for (var i=0; i<eh.length; i++) {
        eh[i].style.display = "none";
    }
}
</script>
<p>
表示切替：<br>
<button type="button" onclick="switch_display('hid','icon')">USER-ID</button>
<button type="button" onclick="switch_display('icon','hid')">ICON</button>
</p>
<p>
表示場所：<br>
<span class="icon"><img src="https://www.hatena.ne.jp/users/ha/hatenacinnamon/profile_l.gif"></span>
<span class="hid">hatenacinnamon</span>
<span class="icon"><img src="https://www.hatena.ne.jp/users/jk/jkondo/profile_l.gif"></span>
<span class="hid">jkondo</span>
<span class="icon"><img src="https://www.hatena.ne.jp/users/na/naoya/profile_l.gif"></span>
<span class="hid">naoya</span>
</p>

参考

• JavaScriptで、html上のとあるclassを持つ要素を軒並み非表示にしたいとき - Qiita
  http://qiita.com/TongChang/items/0659fba7b9d4aaa46a7b
  • style タグを追加する方法が速いそうなので、速度が必要なときは。