Question: I am trying to create simple widget with fixed position using Jquery. I recently started learning JQuery so I would like to ask what is the better way to to this than:

```
 var i = 0 ;
    $('#button').on('click', function() {
        if( i === 0) {
            $('#widget').animate({'bottom':0},700); 
            i = 1;
        } else {
            $('#widget').animate({'bottom': -211},700); 
            i  = 0;
        }
     });

```

Full code:
<http://jsfiddle.net/zX8He/>

There are better ways I think

Answer: 
You could just toggle a class on click and let CSS do the rest.

[**UPDATED EXAMPLE HERE**](http://jsfiddle.net/6hUZD/)

```
$('#button').on('click', function() {
    $(this).parent('#widget').toggleClass('open');
});

```

CSS

```
#widget {
    width: 150px;
    height: 250px;
    background: gray;
    border: 1px solid black;
    position: absolute;
    right: 0;
    bottom: -211px;
    transition:all 2s;
    -webkit-transition:all 2s;
    -moz-transition:all 2s;
}
#widget.open {
    bottom:0px
}

```

It's pretty simple, just use a CSS transition and add styling to the `.open` class. It's worth noting that I added `overflow:hidden` to the `body` element in order to hide the element below the screen. You can also add `cursor:pointer` to the button element on `:hover` in order to indicate that it is clickable. [**(example)**](http://jsfiddle.net/enPSD/)

```
#button:hover {
    cursor:pointer;
}

```
Using jQuery will allow your code to be cross browser compatible, as CSS3 transitions are not supported in all browsers. <http://jsfiddle.net/fyCcx/>

the css:

```
        .btn{
            border:1px solid #888;
            background: #f8f8f8;
            width:150px;
            height:40px;
            margin:0px;
        }

        #widget{
            width:150px;
            position: absolute;
            right:0px;
            background: #333;
            bottom:0px;
        }

```

the html

```
    <div id="widget">
        <button class="btn">Click Me</button>
    </div>

```

the script:

```
        $(document).ready(function(){
            var open = false;
            $('.btn').click(function(){
                if( !open ){
                    $('#widget').animate({
                        height: '400px'
                    }, 2000);
                    open = true;
                } else{
                    $('#widget').animate({
                        height: $('.btn').height() + 'px'
                    }, 2000);
                    open = false;
                }
            })
        });

```