Problema con childs y parents

[neodani]

Buenas,

Tengo un problema de padres e hijos que no consigo resolver por más vueltas que le doy, y no parece dificil a priori, pero no lo consigo

Resulta que tengo un listado de productos <ul> </ul> cada <li> es un producto diferente. Dentro de cada <li> existe un botón para "sugerir", que lo único que hace es ocultar 3 divs y mostrar uno que está oculto, y si vuelve a pulsar lo deja todo como estaba antes.
Esto me funciona de forma individual para un producto, pero al haber más productos no consigo individualizar para que solo afecte al producto al cual he clicado.

Mi problema está a la hora de aplicar los efectos de ocultar y mostrar.

Estos son los efectos:

Código Javascript:

$(".sugerir").click(function () {
        if ($(".sugerir").hasClass('activo')){
            $(".sugerir_categoria").fadeOut("fast", "linear");
            $(".info1").delay(300).fadeIn("fast", "linear");
            $(".info2").delay(300).fadeIn("fast", "linear");
            $(".info3").delay(300).fadeIn("fast", "linear");
            $(".sugerir#oferta1").toggleClass("activo");
        }else{
            $(this).toggleClass("activo");
            $(".info1").fadeOut("fast", "linear");
            $(".info2").fadeOut("fast", "linear");
            $(".info3").fadeOut("fast", "linear");
            $(".sugerir_categoria").delay(300);
            $(".sugerir_categoria").fadeIn("fast", "linear");
        }
    });
 

Y esta es la estructura html, he eliminado el contenido de las etiquetas para simplificar.

Código HTML:

<ul class="listado" id="items">
    <li id="ofer1" class="producto">        
    <div>
        <span class="category">
            <span class="sugerir" id="ofer1"></span>
        </span>
    </div>
    <div class="content_producto">
        <a class="titulo"></a>
        <p class="descripcion"></p>     
        
        <!-- Esta es la capa que se MUESTRA -->
        <div class="sugerir_categoria" id="ofer1"></div>
 
        <!-- Esta son las 3 capas que se OCULTAN -->        
        <div class="info1"></div>
        <div class="info2"></div>
        <div class="info3"></div>
    </div>
    </li>
    
    <li id="ofer2" class="producto">
    ....
    </li>
</ul>
 

Debo cambiar algo del html para que sea más fácil de identificarlo con jquery?

¿Sabéis cómo debo hacerlo?

Muchas gracias de antemano!

[neodani]

Buenas,

He conseguido solucionar esa parte de la siguiente forma, además como los datos los cargo via Ajax, he tenido que aplicar el live para que me funcionase.

Espero que sirva a alguien que se encuentre alguna vez con algun problema similar.

Código Javascript:

$(".sugerir").live('click',function(){
        var OferId = $(this).attr('id');
        
        if ($("#"+OferId+".sugerir").hasClass('activo')){
            $("#"+OferId+".content_producto .sugerir_categoria").fadeOut("fast", "linear");
            $("#"+OferId+".content_producto .info1").delay(300).fadeIn("fast", "linear");
            $("#"+OferId+".content_producto .info2").delay(300).fadeIn("fast", "linear");
            $("#"+OferId+".content_producto .info3").delay(300).fadeIn("fast", "linear");
            $("#"+OferId+".sugerir").toggleClass("activo");
        }else{
            $("#"+OferId+".sugerir").toggleClass("activo");
            $("#"+OferId+".content_producto .info1").fadeOut("fast", "linear");
            $("#"+OferId+".content_producto .info2").fadeOut("fast", "linear");
            $("#"+OferId+".content_producto .info3").fadeOut("fast", "linear");
            $("#"+OferId+".content_producto .sugerir_categoria").delay(300);
            $("#"+OferId+".content_producto .sugerir_categoria").fadeIn("fast", "linear");
        }
    });
 

Ahora abro otro post con un problema que me ha salido a raiz de solucionar esto

Gracias!