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();
});});
