Question

I am studying jquery, I want make a effection as: first click, slider down the div#ccc and change the link class to ‘aaa’; click again, slider up the div#ccc and change the link class back to ‘bbb’. now slider down can work, but removeClass, addClass not work. how to modify so that two effection work perfect? thanks.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function(){              
$("#click").click(function() {
    $("#ccc").slideDown('fast').show();
    $(this).removeClass('bbb').addClass('aaa');
});
$("#click").click(function() {
    $("#ccc").slideDown('fast').hide();
    $(this).removeClass('aaa').addClass('bbb');
});
});
</script>
<style>
#ccc{display:none;}
</style>
<div id="click" class="bbb">click</div>
<div id="ccc">hello world</div>

Answer 1

You need to use a single toggle event. You are setting the click event twice and that won’t work.

jsfiddle