Lio con el "Leer más"

[raul_romero]

Hola.

Puede ser, pero puedes hacerlo optimizando código.

Para comenzar lo ideal es que la estructura de tu HTML sea correcta, por ejemplo no puede haber elementos con el atributo ID iguales. En ese caso es mejor usar el atributo CLASS.

Antes agregue una regla al css, igual que la regla #leer_mas, pero esta vez como class:

Código CSS:

#leer-mas {
    display:none;
}
.leer-mas {
    display:none;
}
 

En algunos elementos cambiar el atributo ID por class:
id="aTag" ==> class="aTag", más adelante veras porque.
id="leer-mas" ==> class="leer-mas"
Quite la función del atributo href javascript:toggleAndChangeText(); ==> javascript:;
Para que quede de la siguiente manera:

Código HTML:

<div id="caja">
        <span class="album1">       
        <img src="mindpanic.jpg" class="imagen_album_artista_staff">
        <h1 class="titulo_album">[MindPaniC] Javier Del Pozo</h1>
        <p>Multidisciplinar, inquieto, creador y diseñador de Bipolar Station. De adolescente traficaba con cintas de casete en el instituto, poco después empezó a crear su propia música con un viejo PC, siempre en contacto con la escena musical actual. Aficionado a la fotografía, su cámara le acompaña a todas partes. <a class="aTag" href="javascript:;">Leer más ► </a></p>
        <div class="leer-mas"><p>Interesado también por la fotografía analógica, utiliza sus dos cámaras réflex antiguas que compro de segunda mano en Ebay a un buen precio.</p>
        <p>En cuanto a música se refiere escucha diferentes géneros, pero la música electrónica en sus diferentes vertientes son su lado más llamativo. Actualmente muy influenciado por la escena ambient y experimental.</p>
        <p>Fotográficamente de estilo aun no concreto, pero con buen gusto y amplio conocimiento de las técnicas y cachivaches fotográficos.</p>
        Le podrás encontrar en:
        <ul class="lista-normal">
            <li><a href="http://www.flickr.com/photos/javier-del-pozo/">Flickr</a></li>
            <li><a href="http://500px.com/phileras">500px</a></li>
            <li><a href="http://www.mixcloud.com/javier-del-pozo-fernandez/">Mixcloud</a></li>
        </ul>
        </div>
        </span>
        <span class="album2">       
        <img src="sideral.jpg" class="imagen_album_artista_staff">
        <h1 class="titulo_album">[Sideral] Raúl Villalón</h1>
        <p>La mayor parte del tiempo lo dedico a la fotografía y time lapse, sin embargo, desde adolescente, escucho, y en ocasiones produzco música.</p>
        <p>Mis influencias son amplias y abundantes, a nivel visual mencionaría la película Taxi Driver y fotógrafos contemporáneos como Nicolas Bouvier o James Yeung. <a class="aTag" href="javascript:;">Leer más ► </a></p>
        <div class="leer-mas"><p>A nivel musical, son muchos los que han dejado un intenso poso como Orbital, Ladytron, Paul Kalkbrenner, Pan Sonic, Richie Hawtin...</p>
        <p>Actualmente estoy involucrado en varios proyectos, la mayoría relacionados con la fotografía o video, siendo el último la creación de un pack de loops para VJ´s y una aplicación para dispositivos móviles, PictureSight, en la que se muestra el trabajo de fotógrafos consolidados.</p>
        <p>Disfruta, y bienvenido a mi viaje!</p>
        Me podrás encontrar en:
        <ul class="lista-normal">
            <li><a href="http://www.flickr.com/photos/raulvillalon/" alt="Raúl Villalón en Flickr">Flickr</a></li>
            <li><a href="http://www.pond5.com/artist/Sideral" alt="Raúl Villalón en Pond5">Pond5</a></li>
            <li><a href="https://vimeo.com/raulvillalon" alt="Raúl Villalón en Vimeo">Vimeo</a></li>
        </ul>
        </div>
        </span>
        <span class="licencia">¿Quieres formar parte de nuestro equipo? <strong><a href="contacto.php">contacta con nosotros</a></strong></span>
      </div>
 

Ahora utilizamos jquery:

Código Javascript:

<script type="text/javascript">
// Primero que nada esperar a que el documento este listo $().ready(...
$().ready(function(e) {
    // Asignamos el evento toggle a todos los elementos que tengan el class .aTag
    // Este evento lo que hace es una especie de switch, apagado-encendido.
    // Es decir al primer click hace ciertas instrucciones y al segundo click otras instrucciones
    $(".aTag").toggle(
        //Prendido: tomamos el indice del elemento .aTag clickeado, 
//luego con la función eq(index), le decimos cual elemento debe mostrar con la función toggle
        function(){
            var i = $(".aTag").index(this);
            $(this).html("Leer menos ►");
            $(".leer-mas").eq(i).toggle(500);
            },
        //Apagado: IGualmente tomamos el indice del elemento .aTag clickeado, 
//luego con la función eq(index), le decimos cual elemento debe ocultar con la función toggle
        function(){
            var i = $(".aTag").index(this);
            $(this).html("Leer más ►");
            $(".leer-mas").eq(i).toggle(500);
            }
    );
});
</script>
 

Todo esto se puede optimizar aún más.

Espero te sirva de ayuda.