How to use metro ui css sidebar and compact classes

I am having trouble with using sidebar and compact class. In this ul I want to display images of the content but not their text. The text will be appear only on mouse hover.

<ul class="sidebar compact">
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">1</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">2</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">3</span>
    </a>
</li>

Add jQuery, given below, to make it alive on mouse over and mouse leave

<ul class="sidebar compact">
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">1</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">2</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">3</span>
    </a>
</li>

Here is a jQuery which removes compact class to stretch it when mouse is over and adds compact class when mouse leaves to compress it back

<script type="text/javascript">
$(document).ready(function () {
    $('.sidebar').hover(function () {
        $(".sidebar").removeClass("compact");
    });
    $('.sidebar').mouseleave(function () {
        $(".sidebar").addClass("compact");
    });
});