CODEWITHSUNDEEP
javascriptjquery
I'll-Be-Back
I'll-Be-Back

Reputation: 10838

How to avoid duplicate code (toggle when page loaded)?

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>

Upvotes: 1

Views: 146

Answers (3)

mVChr
mVChr

Reputation: 50205

Create a named function and call it a couple times:

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

$(".sub-title").on("click", function(){ toggleArrow(this); });
$(".default-hide").each(function(i, el){ toggleArrow(this); });

Upvotes: 1

Johnny5
Johnny5

Reputation: 6882

You can trigger the click event manually for the default-hide rows.

Like this

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

Upvotes: 0

GNi33
GNi33

Reputation: 4509

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

Upvotes: 1

Related Questions