Concatenating a function in JavaScript

Question

I have the following two JavaScript function:

JS 1

$( ".show-more" ).click(function() {
  event.preventDefault();
  $( this ).next().slideToggle( "fast", function() {
  });
  $( this ).toggleClass("show-more-rotate");
});

JS 2

$( ".show-more-section" ).click(function() {
  event.preventDefault();
  $( this ).next().slideToggle( "fast", function() {
  });
  $( this ).toggleClass("show-more-section-rotate");
});

Is there a way to concatenate the two functions into one? I tried the following, but the functionality seems to only be working for the last listed element:

JS - Failed attemp at concatenating

$( ".show-more, .show-more-section" ).click(function() {
  event.preventDefault();
  $( this ).next().slideToggle( "fast", function() {
  });
  $( this ).toggleClass("show-more-rotate, show-more-section-rotate");
});

Shouldn't your call to toggleClass() be part of the callback passed to slideToggle() instead of running sequentially? — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 17, 2015 at 9:36

Tushar · Accepted Answer · 2015-06-17 09:35:59Z

2

See comments inline:

// bind event on both the elements
$(".show-more, .show-more-section").on('click', function (event) {
//                                                        ^^^^^^ Add this
    event.preventDefault();

    $(this).next().slideToggle("fast", function () {});
    $(this).toggleClass("show-more-rotate show-more-section-rotate");
    // Remove `,` from toggleClass
});

EDIT

You can also chain the methods as:

$(this).toggleClass("show-more-rotate show-more-section-rotate")
    .next().slideToggle("fast", function () {});

Update

If you want to toggle class after slideToggle is completed:

var $this = $(this);
$this.next().slideToggle("fast", function () {
    $this.toggleClass("show-more-rotate show-more-section-rotate")
});

edited Jun 17, 2015 at 9:35

answered Jun 17, 2015 at 9:34

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Julian Samarjiev Over a year ago

The original answer you gave seems to only be targeting and working for .show-more-section and .show-more-section-rotate, therefore only the last listed elements.

Tushar Over a year ago

@JulianSamarjiev What are you saying?

Julian Samarjiev Over a year ago

@Tushar I am getting the same result as the code I listed under my failed attempt (only the second class' are getting targeted), and yes I did remove the comma :)

Tushar Over a year ago

@JulianSamarjiev Please create jsfiddle for this

Umesh Sehta · Accepted Answer · 2015-06-17 09:52:07Z

1

try this:-

 $(".show-more, .show-more-section").on('click', function (event) {
   event.preventDefault();
   $(this).next().slideToggle("fast", function () {});
   if($(this).is('.show-more'))
   {
    $(this).toggleClass("show-more-rotate");       
   }else
   {
    $(this).toggleClass("show-more-section-rotate");
   }
});

Demo

answered Jun 17, 2015 at 9:52

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

Comments

Vigneswaran Marimuthu · Accepted Answer · 2015-06-17 09:40:12Z

1

You can create the handler function and can reuse it in the click handler

$( ".show-more" ).click(showMoreClickHandler);

$( ".show-more-section" ).click(showMoreClickHandler);

function showMoreClickHandler(e) {
    e.preventDefault();
    $( this ).next().slideToggle( "fast", function() {});
    $( this ).toggleClass("");
}

For toggle class, you can add data-toggle-class attribute in HTML and can read the value and perform toggling.

I hope, show-more-rotate and show-more-section-rotate should be applied on it's respective element not on the other.

edited Jun 17, 2015 at 9:40

answered Jun 17, 2015 at 9:33

Vigneswaran Marimuthu

2,54216 silver badges16 bronze badges

1 Comment

A. Wolff Over a year ago

You are forgetting one class to toggle

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-17 09:35:22Z

0

Remove the comma in the toggleClass:

$(".show-more, .show-more-section").on('click', function (event) {
    event.preventDefault();
    $(this).next().slideToggle("fast", function () {
    });
    $(this).toggleClass("show-more-rotate show-more-section-rotate");
});

answered Jun 17, 2015 at 9:35

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

Concatenating a function in JavaScript

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related