How to use taggleClass for 3 different css?

Question

When accessing pag, titles are color=blue

When you click on the title the color changes to color=red (and opens contents)

But when the title closes it goes back to color=blue

I need: When you click on the title change to the color=red and when you click again when you exit it becomes color=green

I appreciate the help.

JQ321
$(document).ready(function(){
    $('#abre').on('click' , function(){ // abre tudo
        $('.titulo .conteudo').show();
        });
    $('#fecha').on('click' , function(){ // fecha tudo
        $('.titulo .conteudo').hide();
    });
    $('.titulo').on('click' , function(){ // abre/fecha cada titulo
        var id = $(this).attr('id');
        $('#tit'+id).toggle();
        var classes = ['red','green']; // Nomes das classes CSS
        this.className = classes[($.inArray(this.className, classes)+1)%classes.length]; // Altera a class conforme o clique
    });
});

CSS
.titulo {color:blue}
.red {color:red}
.green {color:green}
.conteudo {display: none;}

@media(min-width:800px){
.lista-titulos {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    }
.titulo,.mostra{
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    }
}
@media(min-width:1024px){
.titulo {cursor:pointer}
.titulo:hover {background:yellow}

PHP/HTML5
<div class="lista-titulos">
   BD select while...
  <div class="titulo" id="<?=$id?>"><span class="tit<?=$id?>"><?=$perg?>/span>
    <span id="tit<?=$id?>" class="conteudo">
        <div class="mostra">TEXTO</div>
    </span>
  </div>
</div>

NO RODAPÉ
<div><button type="button" id="abre">abrir tudo</button> <button type="button" id="fecha">fechar tudo</button></div>

Answer 1

I believe that’s what you want.

$(document).ready(function(){
  $('#abre').on('click' , function(){ // abre tudo
    $('.titulo .conteudo').show();
  });
  $('#fecha').on('click' , function(){ // fecha tudo
    $('.titulo .conteudo').hide();
  });
  $('.titulo').on('click' , function(){ // abre/fecha cada titulo
    var id = $(this).attr('id');
    $('#tit'+id).toggle();
    $(this).toggleClass(function() {
      // Altera a classe CSS
      return $(this).is('.red, .green') ? 'red green' : 'red';
    });
  });
});

.titulo {color:blue}
.red {color:red}
.green {color:green}
.conteudo {display: none;}

@media(min-width:800px){
.lista-titulos {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    }
.titulo,.mostra{
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    }
}
@media(min-width:1024px){
.titulo {cursor:pointer}
.titulo:hover {background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="titulo" id="01">
  <span class="cor01">TITULO 01</span>
    <span id="tit01" class="conteudo">Conteudo 01</span>
</div>
<div class="titulo" id="02">
  <span class="cor02">TITULO 02</span>
    <span id="tit02" class="conteudo">Conteudo 02</span>
</div>
<div class="titulo" id="03">
  <span class="cor03">TITULO 03</span>
    <span id="tit03" class="conteudo">Conteudo 03</span>
</div>
<div class="titulo" id="04">
  <span class="cor04">TITULO 04</span>
    <span id="tit04" class="conteudo">Conteudo 04</span>
</div>
<div><button type="button" id="abre">abrir tudo</button> <button type="button" id="fecha">fechar tudo</button></div>