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: 
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.
You should Class getClass() method to detect the exact class at runtime.

```
if (t.getClass() == SubType.class) 
    do SubType stuff
else if (t.getClass() == SuperType.class) 
   do SuperType stuff
else do your stuff

```