jQuery - Toggle CSS Background Image Expand/Close

Posted by urbanrunic on Stack Overflow See other posts from Stack Overflow or by urbanrunic
Published on 2012-12-07T16:41:36Z Indexed on 2012/12/07 17:05 UTC
Read the original article Hit count: 193

Filed under:
|
|
|

I am looking for a way to change the back ground image on toggle as in this questions here:

jQuery - Toggle Image Expand/Close

My issue is I have this html:

<button id="close-menu"></button>
<div id="menu-bar">
<div class="wrapper">
    <a href="http://www.website.com" target="_blank">
        <img src="image.png" alt="">
    </a>
    <div class="options">
        <h2>eBlast Tools</h2>
        <ul>
            <li class="toggle-images">Images are <span>enabled</span>. Click to disable.</li>
            <li class="download-zip"><a href="download.zip">Download ZIP File</a></li>
        </ul>
    </div>
</div>
</div>

and this is my current jquery:

$('#close-menu').click(function() {
    $('#menu-bar').slideToggle(400);
    return false;
});

and this is the css:

#close-menu {
background: url(../img/minus-button.png);
background-position: top left;
width: 25px;
height: 25px;
position: absolute;
top: 10px;
right: 20px;
z-index: 100;
border: none;
}

#close-menu:hover {
background: url(../img/minus-button.png);
background-position: bottom left;
}

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css