JQUERY 1.7.1 toggle li id not working

Question

I'm using the code presented here: http://trevordavis.net/blog/simple-jquery-text-resizer so that my visitors can re-size the page texts. I like this method except for the fact that it uses 3 buttons to change text size. I've got the re-size buttonS working but what I'm trying to accomplish now is to get it looping my buttons (display:block - display:none). ei: if text size small, show medium button, if text size medium show large button, if text large, show small button, as opposed to having the 3 buttons show all the time.

I'm using jquery-1.7.1.min.js (toggle was not yet retired).

My text resize part of the code works, but not the toggling buttons. There could be hope in doing the toggling on an ID instead of class but, not being fluent in js, I have not figured out how to do target the id instead of the class, and I don't know that that is what is wrong with code in the first place.

Here is my code:

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript">
/*set resizer cookie*/
$(document).ready(function() {
    if($.cookie('TEXT_SIZE')) {
        $('body').addClass($.cookie('TEXT_SIZE'));  
    } else {
        $('body').addClass("small");    
    }
    /*set resizer class to body*/
    $('.resizer a').click(function() {
        var textSize = $(this).parent().attr('class');
        $('body').removeClass('small medium large').addClass(textSize);
        $.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
        return false;
        /*show the proper button (for looping sizes, from small to large, back to small ---NOT WORKING*/
         $('.toggle').hide();

        if (textSize = 'small') {elem = "medium" };
        if (textSize = 'medium') {elem = "large" } ;
        if (textSize = 'large') {elem = "small" };
    $('.toggle').not(elem).hide();
    elem.toggle();          
    });
});
</script>

<ul class="resizer" id="link">
<li class="small" id="small" style="display: block;"><a href="#" class="togglelink">  <img alt="larger" width="22" height="16" src="../Images/BaseFiles/glyphicons_115_text_smaller.png"/></a></li>
<li class="medium"  id="medium"  style="display: none;"><a href="#" class="togglelink"><img alt="larger" width="22" height="16" src="../Images/BaseFiles/glyphicons_116_text_bigger.png"/></a></li>
<li class="large"  id="large" style="display: none;"><a href="#" class="togglelink">  <img alt="smaller" width="22" height="16" src="../Images/BaseFiles/glyphicons_116_text_bigger.png"/></a></li>
</ul>

Thank you for any help!

Answer 1

working example

in your code looping sizes block goes after the "return false" expression, which ends any futher execution of the script in the "click" function.

there are also some mistakes with manipulating classes in jquery like this:

if (textSize == 'small') {elem = ".medium" };