Effects and Visibility

/**
 * Hide elements by setting display: none
 * @returns The Cash collection for chaining
 */
hide(): this;

/**
 * Show elements by restoring their display property
 * @returns The Cash collection for chaining
 */
show(): this;

/**
 * Toggle element visibility between hidden and visible states
 * @param force - Optional boolean to force show (true) or hide (false)
 * @returns The Cash collection for chaining
 */
toggle(force?: boolean): this;

// Basic visibility control
$('.modal').show();
$('.popup').hide();
$('.menu').toggle();

// Force specific state
$('.element').toggle(true);  // Always show
$('.element').toggle(false); // Always hide

// Conditional visibility
if (user.isLoggedIn) {
  $('.user-menu').show();
  $('.login-form').hide();
} else {
  $('.user-menu').hide();
  $('.login-form').show();
}

// Toggle based on conditions
$('.advanced-settings').toggle(user.isAdmin);
$('.error-message').toggle(hasErrors);

// Chain with other methods
$('.notification')
  .text('Settings saved successfully')
  .addClass('success')
  .show()
  .delay(3000)
  .fadeOut(); // Note: fadeOut not available in Cash, use CSS transitions

// Show/hide with CSS classes for animations
$('.modal')
  .show() // Make visible immediately
  .addClass('fade-in'); // Add class for CSS animation

// Toggle menu visibility
$('.menu-toggle').on('click', function() {
  $('.mobile-menu').toggle();
  $(this).toggleClass('active');
});

// Accordion-style interactions
$('.accordion-header').on('click', function() {
  const content = $(this).next('.accordion-content');
  const isVisible = content.is(':visible');
  
  // Hide all other accordion contents
  $('.accordion-content').hide();
  
  // Show current content if it wasn't visible
  if (!isVisible) {
    content.show();
  }
});

// Conditional display based on form state
$('.form-field').on('change', function() {
  const value = $(this).val();
  $('.conditional-field').toggle(value === 'other');
});

// Element originally has display: block
$('.element').hide(); // Sets display: none
$('.element').show(); // Restores display: block

// Element originally has display: inline-block
$('.inline-element').hide(); // Sets display: none
$('.inline-element').show(); // Restores display: inline-block

.fade-transition {
  transition: opacity 0.3s ease;
}

.fade-transition.hidden {
  opacity: 0;
}

// Fade out effect
$('.element')
  .addClass('hidden')
  .delay(300) // Wait for transition
  .queue(function() {
    $(this).hide().dequeue();
  });

// Fade in effect
$('.element')
  .show()
  .removeClass('hidden');

// Check if element is visible
const isVisible = $('.element').is(':visible');

// Check specific visibility states
const isHidden = $('.element').is(':hidden');
const hasDisplay = $('.element').css('display') !== 'none';

// Conditional actions based on visibility
if ($('.menu').is(':visible')) {
  $('.menu').hide();
} else {
  $('.menu').show();
}

// Modal management
function openModal(modalSelector) {
  $(modalSelector).show();
  $('body').addClass('modal-open'); // Prevent scroll
}

function closeModal(modalSelector) {
  $(modalSelector).hide();
  $('body').removeClass('modal-open');
}

// Usage
$('.open-modal').on('click', () => openModal('.modal'));
$('.close-modal, .modal-overlay').on('click', () => closeModal('.modal'));

// Show more/less functionality
$('.show-more').on('click', function() {
  const moreContent = $(this).siblings('.more-content');
  const isVisible = moreContent.is(':visible');
  
  moreContent.toggle();
  $(this).text(isVisible ? 'Show more' : 'Show less');
});

// Loading state management
function showLoading(container) {
  $(container).find('.content').hide();
  $(container).find('.loading').show();
}

function hideLoading(container) {
  $(container).find('.loading').hide();
  $(container).find('.content').show();
}

// Usage
showLoading('.data-container');
fetchData().then(data => {
  renderData(data);
  hideLoading('.data-container');
});

// Show/hide based on screen size
function handleResponsiveElements() {
  const isMobile = $(window).width() < 768;
  
  $('.desktop-only').toggle(!isMobile);
  $('.mobile-only').toggle(isMobile);
}

$(window).on('resize', handleResponsiveElements);
handleResponsiveElements(); // Initial call

// Show/hide based on scroll position
$(window).on('scroll', function() {
  const scrollTop = $(window).scrollTop();
  $('.back-to-top').toggle(scrollTop > 300);
});