Question

I have a div that when clicked, causes my header’s image to shrink and resize the header. The html is as follows:

<div id="topmenu" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </a>

                            <a class="brand logo" href="http://www.test.com/testsite/">
                                <div id="imgsize">
                    <img src="http://www.test.com/testsite/Logo-1024x335.png" alt="Logo" />
                </div>
                            </a>

            <div id="searchicons">
                <form class="navbar-search pull-right" method="get" id="searchform" action="http://www.test.com/testsite/">
                    <input type="text" class="search-query" placeholder="Search" name="s" id="s" value="">
                </form>

                <a href="http://www.test.com/testsite/feed/" title="Subscribe to our RSS Feed" class="topmenu-social pull-right"><i class="icon-rss icon-large"></i></a>

                                    <a href="http://twitter.com/#" title="Follow us on Twitter" class="topmenu-social pull-right"><i class="icon-twitter icon-large"></i></a>

                                    <a href="http://facebook.com/#" title="Find us on Facebook" class="topmenu-social pull-right"><i class="icon-facebook icon-large"></i></a>
                                </div>
        </div>
            <nav id="nav-main" class="nav-collapse" role="navigation">
                <ul id="menu-top" class="nav"><li class="menu-about"><a href="http://www.test.com/testsite/about/">About</a></li></ul>                  
            </nav>
        <div id="toggler" class="shrink visible-desktop"><a href="#"><span id="toggler_span"><i class="icon-chevron-up"></i><br>Hide</span></a></div>
    </div>
</div>

This is my jQuery:

<script>
$(document).ready(function() {
$('#toggler').toggle(function () {
    $('#imgsize').css('max-width','230px');
    $('#toggler_span').replaceWith('<div id="toggler_span">Show<br><i class="icon-chevron-down"></i></span>');
}, function () {
    $('#imgsize').css('max-width','1024px');
    $('#toggler_span').replaceWith('<div id="toggler_span"><i class="icon-chevron-up"></i><br>Hide</span>');
});
});
</script>

The good new is the code works. But I want to add a little pizzaz to it and make it animate the resizing of the image/header.

The header’s height is determined by the image’s height which is set to auto based on the image’s width which is what gets altered with the jquery to create the resizing of the image.

I am aware of slideToggle but it won’t do anything when I apply it to my code.

Is there another method I could use?

Answer 1

Instead of the css method try animate:

$(document).ready(function() { 
    $('#toggler').toggle(function () { 
        $('#imgsize').animate({'max-width': '230px'}, 1000);

        $('#toggler_span').replaceWith('<div id="toggler_span">Show<br><i class="icon-chevron-down"></i></span>'); }, function () { $('#imgsize').animate({'max-width': '1024px'}, 1000);

        $('#toggler_span').replaceWith('<div id="toggler_span"><i class="icon-chevron-up"></i><br>Hide</span>'); 
    }); 
});