Question: I have managed to get a `<ul>` to switch display on and off with only a few lines of vanilla JavaScript code but I've run into an issue. 

I gave the `<li>` that switches it on/off a `:hover` value (gray in this case). I'm keeping the same color on the `<li>` as the `<ul>` is collapsed. When the `<ul>` display is turned off though, I return it to the same value as it had had previously but the `:hover` value no longer works. Any solutions to this?

This is my JavaScript:

```
function expandIt(obj) {
    obj.nextSibling.style.display = "block";
    obj.style.backgroundColor = "gray";};

function reduceIt(obj) {
    obj.style.display = "none";
    obj.previousSibling.style.backgroundColor = "white";};

```

This is the HTML:

```
<ul>
    <li onclick="expandIt(this)">ITEM</li>
        <ul onclick="reduceIt(this)">
            <li>subitem</li>
        </ul>
</ul>

```

Answer: 
What Eran said is true, but using instanceof is a mistake if you can do this instead:

```
class SuperType {
    void doStuff(...) {
        ...do SuperType stuff...
    }
}

class SubType {
    @Override
    void doStuff(...) {
        ...do SubType stuff...
    }
}

SuperType t = methodThatMayReturnSuperTypeOrSubType(...);

t.doStuff();

```
You had a typo. It should be `instanceof`.

The syntax is :

```
if (t instanceof SubType) {
    //do SubType stuff
} else {
    //do SuperType stuff
}

```