Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/03/2013, 11:43
eduardomxm
 
Fecha de Ingreso: abril-2010
Ubicación: Cancun
Mensajes: 88
Antigüedad: 15 años
Puntos: 2
Mostrar/ocultar listas JQuery para mejorarlo o hacer Nuevo

Este es un pequeño codigo que hice para ocultar listas dependiendo el año seleccionado mostrara los meses de su lista, debe ocultar las demas listas al mostrar solo una, y cambiar el signo + por - dependiendo

Codigo Html

Código HTML:
<div id="fechaeventos">
<div class="anios">
<div id="2011" class="btn_masmenos">+</div>
Eventos 2011
</div>
<ul id="anio-2011" class="inactivoyear ulanios">
<li class="inactivomonth">Enero</li>
<li class="inactivomonth">Febrero</li>
<li class="inactivomonth">Marzo</li>
<li class="inactivomonth">Abril</li>
<li class="inactivomonth">Mayo</li>
<li class="inactivomonth">Junio</li>
<li class="inactivomonth">Julio</li>
<li class="inactivomonth">Agosto</li>
<li class="inactivomonth">Septiembre</li>
<li class="inactivomonth">Octubre</li>
<li class="inactivomonth">Noviembre</li>
<li class="inactivomonth">Diciembre</li>
</ul>
<div class="anios">
<div id="2010" class="btn_masmenos">-</div>
Eventos 2010
</div>
<ul id="anio-2010" class="activoyear ulanios">
<li class="inactivomonth">Enero</li>
<li class="inactivomonth">Febrero</li>
<li class="inactivomonth">Marzo</li>
<li class="inactivomonth">Abril</li>
<li class="inactivomonth">Mayo</li>
<li class="inactivomonth">Junio</li>
<li class="inactivomonth">Julio</li>
<li class="inactivomonth">Agosto</li>
<li class="inactivomonth">Septiembre</li>
<li class="inactivomonth">Octubre</li>
<li class="inactivomonth">Noviembre</li>
<li class="inactivomonth">Diciembre</li>
</ul>
<div class="anios">
<div id="2009" class="btn_masmenos">+</div>
Eventos 2009
</div>
<ul id="anio-2009" class="inactivoyear ulanios">
<li class="inactivomonth">Enero</li>
<li class="inactivomonth">Febrero</li>
<li class="inactivomonth">Marzo</li>
<li class="inactivomonth">Abril</li>
<li class="inactivomonth">Mayo</li>
<li class="inactivomonth">Junio</li>
<li class="inactivomonth">Julio</li>
<li class="inactivomonth">Agosto</li>
<li class="inactivomonth">Septiembre</li>
<li class="inactivomonth">Octubre</li>
<li class="inactivomonth">Noviembre</li>
<li class="inactivomonth">Diciembre</li>
</ul>
</div> 
Aplico un script para que oculte todos las clases .inactivoyear

Código HTML:
<script>
$(".inactivoyear").hide();
</script> 
y mi codigo Jquery para hacer los eventos para su ejecucion
Código:
$(document).ready(function(){
$(".btn_masmenos").click(function () {
	var v =$(this).attr("id");
	$("#anio-"+v).slideToggle("slow",function(){
		var signo=$("#"+v).html();
		if(signo=="+"){signo="-";$('div.btn_masmenos').not("#"+v).html("+");}
		else{signo="+";}
		$("#"+v).html(signo);
		});
	$(".activoyear").removeClass("activoyear").addClass("inactivoyear")
	$("#anio-"+v).addClass("activoyear")
	$('ul.inactivoyear').not(".activoyear").hide();
	});});