jBase-2/wiki/EFFECTS-Slide-(vertical).md

• slideDown | slideUp | slideToggleBox

---

.slideDown

Description Display the matched elements with a sliding motion (expanding height downwards).

Parameters

• options (Object, optional): Animation options.
  • duration (Number): Duration in milliseconds (default is 300).
  • displayType (String): The CSS display value to set before sliding (default is 'block').
  • easing (String): CSS transition timing function (e.g., 'linear', 'ease-in-out').
  • bounce (Boolean): If set to true, applies a dynamic cubic-bezier curve that slightly overshoots the target height for a spring effect.

Returns

• (jBase): Current instance.

Example

// Reveal a dropdown menu
$('.dropdown-menu').slideDown({ duration: 200 });

// 1. Shorthand syntax (Number)
$('.dropdown-content').slideDown(400);

// 2. Custom display type and bounce
$('.accordion-panel').slideDown({ 
    duration: 500, 
    displayType: 'flex', 
    bounce: true 
});

---

.slideUp

Description Hide the matched elements with a sliding motion (collapsing height upwards).

Parameters

• options (Object, optional): Animation options.
  • duration (Number): Duration in milliseconds (default is 300).
  • easing (String): CSS transition timing function.
  • bounce (Boolean): If set to true, the element slightly expands before collapsing.

Returns

• (jBase): Current instance.

Example

$('.dropdown-menu').slideUp({ duration: 200 });

// 1. Shorthand syntax (Number)
$('.alert-box').slideUp(300);

// 2. Hide with custom easing
$('.modal-body').slideUp({ 
    duration: 500, 
    easing: 'ease-out' 
});

---

.slideToggleBox

Description Display or hide the matched elements with a vertical sliding motion. Ideal for accordions or collapsible boxes.

Parameters

• options (Object | Number, optional): Animation options object, or a number representing the duration in milliseconds. Passes these options to either slideDown or slideUp

Returns

• (jBase): Current instance.

Example

$('.accordion-header').click(function() {
    // Slide toggle the next element (the body)
    $(this).next().slideToggleBox({ duration: 300 });
});

// Toggle an accordion panel with shorthand syntax
$('.accordion-header').on('click', () => {
    $(this).next('.accordion-content').slideToggleBox(400);
});