Rozsuwany box

Oto prosty sposób na rozsuwany box. Kontener o klasie "selector" jest naszym przyciskiem i umożliwia pokazanie kontenera o klasie "box". Opócz tego dodawana jest klasa "opened_selector" do kontenera "selector", gdy "box" jest otwarty.

Możnaby to oczywiście zrobić za pomocą toggleClass, ale pokazany tutaj sposób umożliwia dodanie dodatkowych operacji dla parzystych i nieparzystych kliknięć.

HMTL:

<div id="all">
    <div class="selector">&nbsp;</div>	
    <div class="box">&nbsp;</div>						
</div>

CSS:

.box{
    background:red;
    width:100px;
    height:100px;
    display:none;
}
.selector{
    background:blue;
    width:20px;
    height:20px;
    display:block;   
}

JS:

<script type="text/javascript"> if (window.jQuery == undefined) document.write( unescape('%3Cscript src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"%3E%3C/script%3E') );</script>	
<script>
jQuery.noConflict();
jQuery(document).ready(
    function()
    {	
            jQuery('.selector').click(function() {
            jQuery('.box').slideToggle('slow', function() {});
                }).toggle(function () {
                    jQuery(".selector").addClass( "opened_selector" ); 
                }, function() {
                jQuery(".selector").removeClass( "opened_selector" ); 
        });;
    });
</script>

DEMO