Is it possible to toggle between hide and show functions using Jquery?

Question

Is it possible to toggle between hide and show functions using Jquery?

I have a question about two jquery functions that I've been struggling with.

$(document).ready(init); 
  function init() { 
  $(".alphaleft").hover(function (g) { 
  $(".boxy,.yee").show(); 
  }, 
  function (g) { 
  $(".boxy,.yee").hide(); 
  }); 
}

$(document).ready(init); 
  function init() { 
  $(".alpharight").hover(function (h) { 
  $(".tea,.coffee").show(); 
  }, 
  function (h) { 
  $(".tea,.coffee").hide(); 
  }); 
}

The issue is that only one function shows up at a time. If I comment out one, then the other works fine and vice versa. I can't figure out what's causing this inconsistency. Any suggestions or advice would be greatly appreciated, as I've been trying to solve this for an hour now and it's driving me crazy!

edit: http://jsfiddle.net/W3TTh here is my jsFiddle link for reference!

javascript jquery css

Answer 1

Answer №1

Utilize anonymous functions when passing them to the ready function.

$(document).ready(function(){ 
   $(".alphaleft").hover(function (g) { 
    $(".boxy,.yee").show(); 
   }, 
   function (g) { 
    $(".boxy,.yee").hide(); 
   }); 
});

$(document).ready(function () { 
  $(".alpharight").hover(function (h) { 
    $(".tea,.coffee").show(); 
  }, 
  function (h) { 
    $(".tea,.coffee").hide(); 
  }); 
});

To avoid conflicts caused by naming functions the same, it is important to use unique names for each function declaration. By using anonymous functions within a closure, you can prevent one function from overriding another function with the same name at the global scope.

You can see this issue in action on this example fiddle. Rearranging your code also highlights the problem:

//Init function created  
function init() { 
  $(".alphaleft").hover(function (g) { 
  $(".boxy,.yee").show(); 
  }, 
  function (g) { 
  $(".boxy,.yee").hide(); 
  }); 
}

//Init function overridden
function init() { 
  $(".alpharight").hover(function (h) { 
  $(".tea,.coffee").show(); 
  }, 
  function (h) { 
  $(".tea,.coffee").hide(); 
  }); 
}

//Init function called 2x after being overridden
$(document).ready(init);
$(document).ready(init);

Answer 2

Utilize anonymous functions when passing them to the ready function.

$(document).ready(function(){ 
   $(".alphaleft").hover(function (g) { 
    $(".boxy,.yee").show(); 
   }, 
   function (g) { 
    $(".boxy,.yee").hide(); 
   }); 
});

$(document).ready(function () { 
  $(".alpharight").hover(function (h) { 
    $(".tea,.coffee").show(); 
  }, 
  function (h) { 
    $(".tea,.coffee").hide(); 
  }); 
});

To avoid conflicts caused by naming functions the same, it is important to use unique names for each function declaration. By using anonymous functions within a closure, you can prevent one function from overriding another function with the same name at the global scope.

You can see this issue in action on this example fiddle. Rearranging your code also highlights the problem:

//Init function created  
function init() { 
  $(".alphaleft").hover(function (g) { 
  $(".boxy,.yee").show(); 
  }, 
  function (g) { 
  $(".boxy,.yee").hide(); 
  }); 
}

//Init function overridden
function init() { 
  $(".alpharight").hover(function (h) { 
  $(".tea,.coffee").show(); 
  }, 
  function (h) { 
  $(".tea,.coffee").hide(); 
  }); 
}

//Init function called 2x after being overridden
$(document).ready(init);
$(document).ready(init);

Answer 3

Answer №2

Avoid having duplicate ready functions and unnecessary calls to a separate init function:

$(document).ready(function() { 
  $(".alphaleft").hover(function () { 
      $(".boxy,.yee").show(); 
  }, function () { 
      $(".boxy,.yee").hide(); 
  }); 

  $(".alpharight").hover(function () { 
      $(".tea,.coffee").show(); 
  }, function () { 
      $(".tea,.coffee").hide(); 
  }); 
});

Answer 4

Avoid having duplicate ready functions and unnecessary calls to a separate init function:

$(document).ready(function() { 
  $(".alphaleft").hover(function () { 
      $(".boxy,.yee").show(); 
  }, function () { 
      $(".boxy,.yee").hide(); 
  }); 

  $(".alpharight").hover(function () { 
      $(".tea,.coffee").show(); 
  }, function () { 
      $(".tea,.coffee").hide(); 
  }); 
});

Answer 5

Answer №3

The reason for the issue is that you're redeclaring the init function. To resolve this, consolidate it into a single function as shown below:

$(document).ready(init); 
function init() { 
    $(".alphaleft").hover(function (g) { 
        $(".boxy,.yee").show(); 
    }, 
    function (g) { 
        $(".boxy,.yee").hide(); 
    }); 
    $(".alpharight").hover(function (h) { 
        $(".tea,.coffee").show(); 
    }, 
    function (h) { 
        $(".tea,.coffee").hide(); 
    });    
}

For a demonstration, check out this functioning example: http://jsfiddle.net/Abc123/

Answer 6

The reason for the issue is that you're redeclaring the init function. To resolve this, consolidate it into a single function as shown below:

$(document).ready(init); 
function init() { 
    $(".alphaleft").hover(function (g) { 
        $(".boxy,.yee").show(); 
    }, 
    function (g) { 
        $(".boxy,.yee").hide(); 
    }); 
    $(".alpharight").hover(function (h) { 
        $(".tea,.coffee").show(); 
    }, 
    function (h) { 
        $(".tea,.coffee").hide(); 
    });    
}

For a demonstration, check out this functioning example: http://jsfiddle.net/Abc123/

Is it possible to toggle between hide and show functions using Jquery?

Answer №1

Answer №2

Answer №3

Similar questions

Unusual glitch with paint/rendering in Safari while navigating through a lengthy list of content

Generating elevation graph from a kml file with the combination of php and javascript

Is it possible to establish a standard view for the date/time input field, disregarding the user's

Attempting to retrieve data from cloud Firestore utilizing keyvalue in Angular

choose to display on mobile devices as a dropdown menu rather than a modal window

Creating a tool to display mouse coordinates as a pointer on an HTML5 canvas

Fantastic code snippet for fixing rendering issues with jQuery AJAX

Reacting to a situation where the tailwind grid has an issue: the responsive column span is visible in the HTML, but

Incorporating external function from script into Vue component

What are the recommended methods for updating data using mongoose?

The function Yii2 isAjax returns a boolean value of false

Unable to retrieve JSON data from converting TXT using JavaScript, resulting in undefined output

Unable to clear cache in Next.js using RTK query

Upon installing a global npm package, the system encountered an error stating: 'File or directory not found: ENOENT'

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

Node.js Binary Search Tree - Error: Identifier Not Found

Using Django and jQuery to retrieve a file and display a prompt for downloading the file in the browser

Find out if OpenAI's chat completion feature will trigger a function call or generate a message

Eliminating single and multiple relationships - Mongoose

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS