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");
        }
    });
});

```
Firstly you don't need to assign two click handlers to the same field for this. Both of those will run on every click so the first will set it wide then the second will (once you fix the if condition) set it back to small.

Secondly `x.val()` doesn't make sense when `x` is already the (string) value so you want to compare `x === "Normal"`. Except that given the `x` variable is only used in that one place you don't really need it at all, you can just compare `.val() === "Normal"`.

So try this:

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

```

Note that within the click handler `this` refers to the clicked element, so I've used `$(this)` rather than `$("#widen_btn")` and cached a reference to that in a `$this` variable. If the button in question is an `<input type="button">` you can just say `this.value` directly.