slideToggle activate when page load

Question

Please, can you help me with my code.

First, I managed to call dropdown option from URL

// Relinquish control of `$` to previous library
jQuery.noConflict();

// Wrap jQuery code in IIFE
(function($) {
  $(document).ready(function() {
    // Construct URL object using current browser URL
    var url = new URL(document.location);

    // Get query parameters object
    var params = url.searchParams;

    // Get value of paper
    var selector = params.get("chart-selector");

    // Set it as the dropdown value
    $("#chart-selector").val(selector);
  });
})(jQuery);

However, graph is rendering only when I chose dropdown option mannualy (mouseenter).

$(document).ready(function() {
  $('#navbarDropdown').mouseenter(function() {
    $('.dropdown-menu').slideToggle(300, "linear");
  });

  $('.dropdown-menu').mouseleave(function() {
    $(this).slideToggle(300, "linear");
  });
});

How can I do it automatically, when URL call option? Thank you very much, all of you!

Answer 1

If I understand right you want to call slideToggle on the dropdown right after the page has loaded, and set the value of the element to the chart-selector parameter in the URL.

You can just do that in $(document).ready, you don't need a DOM event's function to call the animation.

So you could do:

// Wrap jQuery code in IIFE
(function($) {
  $(document).ready(function() {
    // Construct URL object using current browser URL
    var url = new URL(document.location);

    // Get query parameters object
    var params = url.searchParams;

    // Get value of paper
    var selector = params.get("chart-selector");

    // Set it as the dropdown value
    $("#chart-selector").val(selector);

    $('.dropdown-menu').slideToggle(300, "linear");
  });
})(jQuery);