Para tu duda numero 1 Por qué se va la clase?
El fragmento de codigo
jQuery('.blurb-1').toggleClass('opened closed');
Va a agregar o quitar las 2 clases opened closed
en donde se encuentre la clase blurb-1
.
En si toggleClass
le puedes pasar las clases que quieras y estas van a ser agregadas o quitadas del selector al que estas llamando en este caso .blurb-1
.
jQuery('.blurb-1').toggleClass('clase1 clase2 clase3 clase4');
supongamos que el valor inicial en blurb-1
es:
<div class="blurb-1"></div>
al ejecutar el toggleClass
de este ejemplo pasaría a:
<div class="blurb-1 clase1 clase2 clase3 clase4"></div>
y al ejecutarlo nuevamente volvería al valor inicial es decir:
<div class="blurb-1"></div>
Para tu duda numero 2 Código inmanejable?
Personalmente te recomiendo que los separes en pequeñas funciones para cada clase EJ:
jQuery(document).ready(function() {
e.preventDefault();
jQuery(".text-1").show(300);
jQuery('.blurb-1').click(function(e){
clasesBlurb1();
});
jQuery('.blurb-2').click(function(e){
clasesBlurb2();
});
jQuery('.blurb-3').click(function(e){
clasesBlurb3();
});
...
jQuery('.blurb-N').click(function(e){
clasesBlurbN();
});
jQuery('.blurb-Z').click(function(e){
clasesBlurbSuperPower();
});
}
function clasesBlurb1(){
jQuery('.blurb-1').click(function(e){
jQuery('.blurb-1').toggleClass('opened closed');
}
function clasesBlurb2(){
jQuery('.blurb-2').removeClass('opened');
jQuery('.blurb-2').addClass('closed');
}
function clasesBlurb3(){
jQuery('.blurb-3').removeClass('opened');
jQuery('.blurb-3').addClass('closed');
}
function clasesBlurbSuperPower(){
jQuery('.blurb-1').removeClass('claseAsombrosa');
jQuery('.blurb-2').addClass('Animacion');
jQuery('.blurb-3').addClass('claseAsombrosa2');
}
De esta forma tendrías el comportamiento separado por cada "Caso"
Espero te sirva saludos.