Question

I have a script:

<script>
$(function(){
  $("#projectReqTable","body").on({'click':function(event){
    event.preventDefault();
    $(this).closest("tr.main").nextUntil("tr.main").toggle("slow");
   }},
   "a.main",null);
});
</script>

What this do is it shows/hides rows on table. Now they are shown and I need to click on button to hide them. How do I hide then automatically on page load?

CSS property of hidden does the tricks, but I cannot filter afterwards the cells are shown. I need to hide them on page load ant the use the script to show them.

Answer 1

Use trigger() function in jquery

You can Trigger the button click event on page load

$("#projectReqTable","body").trigger('click');

hope this helps

More clearly

<script type="text/javascript">
$(document).ready(function(){
   $("#projectReqTable","body").on({'click':function(event){
    event.preventDefault();
    $(this).closest("tr.main").nextUntil("tr.main").toggle("slow");
   }},
   "a.main",null);


   $("#projectReqTable","body").trigger('click');

});
</script>