Question: So I've seen the question asked multiple time and a lot of answers about it but none resolve my own problem and I realy don't understand where this could come from.

How come I'm returning a json content with my controller but still access the error part of my Ajax request?

This is my Ajax :

```
$.ajax({
    url: '../ajax/addArticle',
    type: 'POST',
    data : {
        title : $('#title').val(),
        content :  CKEDITOR.instances.editor.getData(),
    },
    dataType: 'json',
    success: function (data){
        console.log(data);
        if(data == "Posted"){
            alert('Article posté');
            window.location = "/blog";
        }
    },
    error: function(e) {
          console.log(e);
    }
});

```

And my controller return this :

```
$data = ['data' => 'Posted'];
header('Content-Type: application/json');
$data = json_encode($data);
return $data;

```

However this is the output :

[![Screen of netwok](https://i.stack.imgur.com/DVWpS.png)](https://i.stack.imgur.com/DVWpS.png)

Answer: 
Your problem is you used `$("#sidepanel")` instead of `$("#sidePanel")`
-----------------------------------------------------------------------

*Here's a working example after the change is made:*

```js
$(document).ready(function(){
    $("#button").on('mouseover', function(){
       $("#sidePanel").addClass("expanded").removeClass("compact");
    });
});
```

```css
#topbar > div {
  width: 100px;
  height: 30px;
  background: #ccc;
  margin-top: 20px;
}

#sidePanel {
  width: 100%;
  height: 40px;
  background: #ccc;
}

#sidePanel.expanded {
  height: 100px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
    <div id="buttonContainer"></div>
    <div id="button"></div>
</div>
```
first: the solution

```
$(document).ready(function()
{
    $("#button").mouseover(function()
    {
         // class names - without the dot
         $("#sidepanel").addClass("expanded").removeClass("compact");
    });
});

```

then: why you were really close on your first attempt

```
$(document).ready(function()
{
    $("#button").mouseover(function()
    {
        // $(this) selector uses the `this` keyword (not as a string)
        $(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
    });
});

```