[SOLUCIONADO] Botón para ocultar divs

[miguelalexep]

Buenos dias, lo que quiero hacer es lo siguiente. Cuentos con dos fors en el html, los cuales me traen los datos para mostrarlos en pantalla.

Ya hice un link de Mostrar/Ocultar, el cual al presionar me oculta o muestra todos los datos de la pagina. lo que hice fue meterlo dentro de los fors, por lo cual se muestra tantas veces como datos haya. Pero si le doy click me oculta todo, lo que quiero es que al hacer click por ejemplo al primer boton, me oculte el primer parrafo y si doy click al ultimo me oculte el ultimo parrafo.

Estoy lo estoy haciendo con jquery, pero no se me ocurre como asignar las clases dinamicamente para manejar cada uno de estos valores por separado

[Alexis88]

Muéstranos el código que tienes elaborado para poder ayudarte. No somos adivinos.

Saludos

[miguelalexep]

{% for object in list.object_list %}
<a style="color: #fff;background-color: #115095;border-radius: 10px;" class="ocultar" href="#">Mostrar/Ocultar</a><br>

{% for ad in object.detalles.all %}
<div class="abonos">
<div class="{% if object.cancelado %} red{% endif %}">
<div style="width:70px; float:left;">{{ ad.movimiento.fecha_factura|date:"d/m/y" }}</div>
<div style="width:100px; float:left;">{{ ad.movimiento.tipo_documento }}</div>
<div style="width:50px; float:left;" class="righttext">{{ ad.movimiento.get_folio }}</div>
<div style="width:50px; float:left;" class="righttext">{{ ad.dias_vencidos }}</div>
<div style="width:100px; float:left;" class="righttext">{{ ad.movimiento.total|cur }}</div>
<div style="width:100px; float:left;" class="righttext">{{ ad.importe|cur }}</div>
<div class="clear"></div>
</div>
</div>
{% endfor %}
{% for n in object.notas_credito_abono.all %}
<div>
<div style="width:70px; float:left;">{{ n.fecha|date:"d/m/y" }}</div>
<div style="width:100px; float:left;">Nota de crédito</div>
<div style="width:50px; float:left;" class="righttext">{{ n.get_folio }}</div>
<div style="width:50px; float:left;" class="righttext">&nbsp;</div>
<div style="width:100px; float:left;" class="righttext">{{ n.total }}</div>
<div style="width:100px; float:left;" class="righttext">{{ n.total }}</div>
<div class="clear"></div>
</div><br>
{% endfor %}
</a></div>
<div>&nbsp;</div>
{% endfor %}


Y Aqui esta el Jquery

<script>
$(document).ready(function(){
$("#id_year").val('{{ year }}');
$("#id_month").val('{{ month }}');
$("#id_search").val('{{ q }}');
$('.ocultar').click(function(){
$('.abonos').slideToggle(100);
});
});
</script>

[Alexis88]

Lo que sucede es que, de ese modo, muestras/ocultas a todos los elementos cuya clase sea 'abonos'. Lo que debes de hacer es tomar al contenedor del botón y, en él, buscar al elemento con dicha clase.

Un ejemplo:

Código HTML:

<div>
    <div class = "content">Contenido 1</div>
    <button class = "showHide">Show/Hide</button>
</div>
    
<div>
    <div class = "content">Contenido 2</div>
    <button class = "showHide">Show/Hide</button>
</div>
    
<div>
    <div class = "content">Contenido 3</div>
    <button class = "showHide">Show/Hide</button>
</div>
 

Código Javascript:

$(".showHide").click(function(){
    $(this).parent().find(".content").toggle();
});
 

Como dije, al darle clic al botón, ubico al elemento que lo contiene y dentro de este, busco al elemento con la clase en cuestión, así solo afecto a ese elemento y no al resto.



Saludos