Question

See the code below, If you click on the sub-title row it then will hide the rows with it. It work well.

On the second sub-title row (<tr class="sub-title default-hide">) – I want this to toggle/hidden by default when the page loaded.. How to do this without writing duplicate code like below?

   $(".sub-title").on("click",function() {
        tr = $(this).find('span').hasClass("arrow2");
        trSpan = $(this).find('span');
        $(this).nextUntil(".sub-title").each(function() {
            if (!$(this).hasClass('head-order')) {
                $(this).toggle();
                if (tr) {
                    trSpan.removeClass('arrow2').addClass('arrow1');
                } else {
                    trSpan.removeClass('arrow1').addClass('arrow2');
                }
            }
        });
    });

HTML

<table border="1">
 <tbody>
  <tr class="head">
   <td> title </td>
  </tr>
  <tr class="sub-title">
     <td>Sub Title 1 <span class="arrow2"> </span></td>
  </tr>
   <tr> <td>Item 1</td> </tr>
   <tr> <td>Item 2</td> </tr>
   <tr> <td>Item 3</td> </tr>
   <tr class="sub-title default-hide">
     <td>Sub Title 2 <span class="arrow2"></span></td>
   </tr>
   <tr> <td>Item 4</td> </tr>
   <tr> <td>Item 5</td> </tr>
   <tr> <td>Item 6</td> </tr>
  </tbody>
</table>

Answer 1

I created a jsFiddle example with the information you provided.

I edited the code a bit, using a default arrow-class and just adding the class close to it, to define the new style, which should make the code a little shorter.

$(".sub-title").on("click",function() {
    var trSpan = $(this).find('span');

    trSpan.toggleClass('closed');

    $(this).nextUntil(".sub-title").each(function() {
        if (!$(this).hasClass('head-order')) {
            $(this).toggle();
        }
    });
});

To make the “default-hidden” – element closed on pageload, all I do is to trigger a click-event on it after binding the click-Handler.

$('.default-hide').trigger('click');

See the fiddle for a working example