title: Combining lots of similar actions in a html "onclick" event
body: <p>I need to make a button in a page that toggles visibility of some table rows. It's already working well, but the "onclick" event inside the "a" tag is filled with a lot of redundant information, i want to make it cleaner. The code i'm using (and it's working well) is like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function toggle_visibleid(id) {
         var e = document.getElementById(id);
         if(e.style.display == 'none')
            e.style.display = 'table-row';
         else
            e.style.display = 'none';
      }
  &lt;/script&gt;
  
  &lt;a href="#" onclick=
   "toggle_visibleid('cena1');
    toggle_visibleid('cena2');
    toggle_visibleid('cena3');
    toggle_visibleid('cena4');
    toggle_visibleid('cena5');
    toggle_visibleid('cena6');
    toggle_visibleid('cena7');
    toggle_visibleid('cena8');
    toggle_visibleid('cena9');
    toggle_visibleid('cena14');
    toggle_visibleid('cena15');
    toggle_visibleid('cena16');
    toggle_visibleid('cena17');
    toggle_visibleid('cena18');
    toggle_visibleid('cena19');
    toggle_visibleid('cena20');
    toggle_visibleid('cena21');
    toggle_visibleid('cena22');
    toggle_visibleid('cena23');"&gt;Gravações&lt;/a&gt;
  </code></pre>
  
  <p>Is there a way to make it smaller? Like:</p>
  
  <pre><code>&lt;a href="#" onclick="toggle_visibleid('cena1' 'cena2' 'cena3' 'cena4' 'cena5' 'cena6' 'cena7' 'cena8' 'cena9' 'cena14' 'cena15' 'cena16' 'cena17' 'cena18' 'cena19' 'cena20' 'cena21' 'cena22' 'cena23');"&gt;Gravações&lt;/a&gt;
  </code></pre>
  
  <p>Thanks!</p>