onClick class change

Hej eksperter.

Jeg har et lille problem.
Jeg har en menu, hvor jeg har en pil, der peger ned ad, når man klikker på den, kommer der en undermenu frem, og pilen vender sig om, så den peger op. Klikker man på den igen lukker undermenuen men pilen forbliver, så den peger op.

Mine css'er ser således ud:

.kategori {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #1b1b1b;
    background: #f1f1f1;
    border-bottom: 1px solid #c7c7c7;
}
.kategori a p {
    color: #1b1b1b;
    padding: 10px 0px 10px 15px;
    margin: 0;
    background: url(../img/pil_ned.jpg) no-repeat 190px 10px;
    width: 100%;
}
.kategori a:hover p {
    color: #009bdb;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
}

.kategori_op {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #1b1b1b;
    background: #f1f1f1;
    border-bottom: 1px solid #c7c7c7;
}
.kategori_op a p {
    color: #1b1b1b;
    padding: 10px 0px 10px 15px;
    margin: 0;
    background: url(../img/pil_op.jpg) no-repeat 190px 10px;
    width: 100%;
}

.kategori_op a:hover p {
    color: #009bdb;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
}

Jeg har så lavet det således at div'en der indeholder menupunktet ser sådan ud:
<div class="kategori" onclick="this.className = 'kategori_op';">

Hvordan gør jeg så det skifter class'en tilbage til kategori, når man klikker på den igen?

På forhånd tak!