Question

Im trying to toggle some divs and its not working, here is the js:

<script type="text/javascript">
        $(function(){   

            $('#toggle_full').click(function(){         
                $('#full_size').removeClass('toggle');
                $('#thumb_list').addClass('toggle');
            });
        });

        $(function(){   

            $('#toggle_thumb').click(function(){            
                $('#thumb_list').removeClass('toggle');
                $('#full_size').addClass('toggle');
            });
        });
    </script>

Here are the anchors:

<div class="toggle_block">
        <a href="#" id="toggle_full"><img src="img/full_icon.jpg" alt="#"/></a>
        <a href="#" id="toggle_thumbs"><img src="img/thumbs_icon.jpg" alt="#"/></a>
    </div>

Here is the class:

.toggle {
display: none;
}

Now where is the problem?

Answer 1

Your ID’s don’t match.

In your HTML you have toggle_thumbs, but in your code you have toggle_thumb.

---

If all you’re doing is hiding and showing, you can greatly simplify your code like this:

http://jsfiddle.net/xTPU8/2/

$(function() {
    var $elems = $('#toggle_full').hide()
        .add('#toggle_thumb').click(function() {
            $elems.toggle();
    });
});​

EDIT: Made it even a little more efficient.