Make a loop with ids

Navigation
0

I have 7 sections on a page, consisting of a heading panel and a table, the table is shown when the button is clicked to display in the panel-heading.

The function to deploy works but I want to use an index so I do not have to do 7 scripts

Script code: 

<script type="text/javascript">
    $(document).ready(function(){
      $("#dias1").click(function(){
        $("#desplegable1").slideToggle("slow");
      });
        $("#desplegable1").css({ display: 'none' });
   });   
</script>

Expanding: 

  <!--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>
    
asked by Roledi 28.06.2017 в 17:00
source

2 answers

1

There you can see the code that you create and that works perfectly try it although in that page that happens to you it does not go but if you put it in your web if it would walk the base is that you put in each id="dias2" onclick="desplegagle (2) "id=" dias3 "onclick=" desplegagle (3) "and so on this is my new proposal at the end this is the code js that will be in charge of doing what you ask Link new proposal

    
answered by 28.06.2017 / 17:16
source
0

I do not know if this is the code but in the end we need to close a div . Assuming you just omitted to add this to the question we proceed to the answer.

You can replace the click event by assigning it to a class instead of an id (in this case I added the diasclick class to the <a></a> element). 

<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 diasclick" style="margin-top: 5px">
      <span class="glyphicon glyphicon-list">click</span>
    </a>
  </div>


<div class="row">
  <div id="desplegable1">
  </div>
</div>

and the code in jquery would be as follows: 

$(document).ready(function(){
 $(".diasclick").click(function() {
     var id = $(this).attr("id");
     var lastChar = id.substr(id.length - 1); // obtenemos el ultimo caracter del id para saber a cual desplegable lo asignaremos
     $("#desplegable"+lastchar).slideToggle("slow");
 });
     $('*[id^="desplegable"]').css({
        display: 'none'
     });
});
    
answered by 28.06.2017 в 17:51
Tables are traveling down Change item with click