Question: Could someone please tell me whats wrong with the following code? Everything looks good. What I'm trying to achieve is getting the Side-Panel to widen on click, then shorten on click if the value is "Normal".

```
$(document).ready(function(){
    $("#widen_btn").click(function(){
        $("#side-panel").css("width", "500px");
        $("#widen_btn").val("Normal");
    });

    $("#widen_btn").click(function(){
        var x = $("#widen_btn").val();
        if(x.val() == "Normal"){
            $("#side-panel").css("width", "250px");
        }
    });
});

```

Answer: 
You can simplify this a bit.. 

```
$(document).ready(function(){
    $("#widen_btn").click(function() {
        if($(this).val() == "Normal") {
            $("#side-panel").css("width", "250px");
            $(this).val("Narrow");
        } else { 
            $("#side-panel").css("width", "500px");
            $(this).val("Normal");
        }
    });
});

```

That should work.

It just uses `$(this)`, and makes sure that you change the value of the button to something other than "Normal" when it's not set to 500px.

Here's a 'better' example where we cache the `$(this)` variable, so we're not wasting time recreating the object.

```
$(document).ready(function(){
    $("#widen_btn").click(function() {
        var $widen = $(this);
        if( $widen.val() == "Normal") {
            $("#side-panel").css("width", "250px");
            $widen.val("Narrow");
        } else { 
            $("#side-panel").css("width", "500px");
            $widen.val("Normal");
        }
    });
});

```
You mean like this?

```
$(document).ready(function(){
    $("#widen_btn").click(function(){
        var x = $("#widen_btn").val();
        if(x === "Normal"){
            $("#side-panel").css("width", "250px");
        }else{
            $("#side-panel").css("width", "500px");
        }
    });
});

```