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();

```
Yes, you can use `if` with an `instanceof` operator. However, doing so is usually a design smell because such decision should in most cases be left to the method dispatching mechanism. It makes sense if the types involved are not under your control so the option to add a method to those types is not available.