Trigger .slideUp at anchor

285
May 17, 2017, at 11:13 AM

I'm trying to trigger an element to slide up when I reach an anchor. The anchor ID is #blacksection and the element class is .vc_tta-panels-container. I read on another thread that you can trigger onclick actions using something like:

jQuery("#blacksection").trigger('click');

And then I'm using;

  jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();

as the remaining JS. So I have this:

<script>
jQuery("#blacksection").trigger('click');
  jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();
});
</script>

Which isn't working, only just started learning JS and it's baffling my mind, can anyone shed some light on triggering .slideUp for a class at an anchor?

Answer 1

The click event needs to be defined before you call it with the .trigger() function. Also, depending on what sort of default behaviour #blacksection has on the click event, you may wish to use .triggerHandler() instead, which invokes only the user-defined events:

jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();
});
jQuery("#blacksection").triggerHandler('click');

EDIT: I've added a code snippet demonstrating the code:

jQuery(document).ready(function() { 
    jQuery("#blacksection").on('click', function() { 
        jQuery(".vc_tta-panels-container").slideUp(); 
    }); 
    jQuery("#blacksection").trigger('click'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<a id="blacksection">Click Me</a> 
<div class="vc_tta-panels-container"> 
  <span>I am a span element</span> 
  <p>I am a p element</p> 
</div>

READ ALSO
jQuery &ldquo;Back-to-top&rdquo; arrow jumps to top of page before scrolling

jQuery “Back-to-top” arrow jumps to top of page before scrolling

I have a static html/css/js webpage which has a jQuery Back-to-Top button that appears at the bottom after the page has scrolled down 20pxThe arrow, scrolling, etc all work great, except for one super-annoying bug that's bothering me:

242
How to DRY up my switch statement which does almost the same thing in each scenario?

How to DRY up my switch statement which does almost the same thing in each scenario?

I have a function which conjugates a verb in latin given the word(object), voice(string), and tense(string)For reference active and passive are the voices and then present, imperfect etc

216
How to pause Bootstrap 2 carousel while a video plays in a slider

How to pause Bootstrap 2 carousel while a video plays in a slider

Here is my Bootstrap 2 carousel that contains one html5 video and 2 images (I have to use Bootstrap 2 and jQuery 19

864
How do I get the innerHTML of a part of my page when that inner HTML is generated by a Javascript function?

How do I get the innerHTML of a part of my page when that inner HTML is generated by a Javascript function?

I have a function getsWeather which uses the SimpleWeather frameworkThat function is as follows:

190