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 second example was pretty close. When you `$.addClass()` and `$.removeClass()`, or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading `.`). Also JS (and CSS) are case-sensitive, so `$('#sidepanel')` won't target `#sidePanel` - the cases need to match.

```js
    $("#button").mouseover(function() {
      $("#sidePanel").addClass("expanded").removeClass("compact");
    });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>
```

In your first example, `$(this)` is how you reference `this` in jQuery. If you put `this` in quotes, the word `this` is treated as a string literal instead. And since to use `$.parent()` you would need to go up 2 levels, you should use `$.parents()` with the ID of the parent you want to target, then use `$.prev()` to select the previous element, which is `#sidePanel`. So to traverse the DOM like that, this is how I would do it.

```js
$("#button").mouseover(function() {
      $(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
    });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </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");
    });
});

```