Tengo 7 secciones en una página, formadas por un panel heading y una tabla, la tabla se muestra cuando se pulsa el botón para desplegar en el panel-heading.
La función para desplegar funciona pero quiero usar un indice para no tener que hacer 7 scripts
Código script:
<script type="text/javascript">
$(document).ready(function(){
$("#dias1").click(function(){
$("#desplegable1").slideToggle("slow");
});
$("#desplegable1").css({ display: 'none' });
});
</script>
Desplegable:
<!--Lunes-->
<div class="row" style="font-size: 18px;margin-top: 20px">
<div class="panel-heading" style="background-color:rgba(117, 178, 212, 0.41);height: 51px; ">
<p class="col-md-11 col-lg-11" style="margin-bottom: 0px;font-size: 20px"><strong>LUNES</strong></p>
<a href="#" id="dias1" class="col-md-1 col-lg-1" style="margin-top: 5px">
<span class="glyphicon glyphicon-list"></span>
</a>
</div>
<div class="row">
<div id="desplegable1">
<div class="row">
<table class="table table-hover">
</table>
</div>
</div>
</div>
<!--Martes-->
<div class="row" style="font-size: 18px;margin-top: 20px">
<div class="panel-heading" style="background-color:rgba(117, 178, 212, 0.41);height: 51px; ">
<p class="col-md-11 col-lg-11" style="margin-bottom: 0px;font-size: 20px"><strong>MARTES</strong></p>
<a href="#" id="dias2" class="col-md-1 col-lg-1" style="margin-top: 5px">
<span class="glyphicon glyphicon-list"></span>
</a>
</div>
</div>
<div class="row">
<div id="desplegable2">
<div class="row">
<table class="table table-hover">
</table>
</div>
</div>
</div>