score:3
Toggle saves it's state on the object you call it on. Each time you call Toggle, it alternates between function 1 and function 2. It knows nothing else about your app. It just alternates between the two functions you pass it each time you call it.
When you reset the state of the popup without using Toggle, it gets out of sync as it now has no idea that you want to go back to the first state. So, when you click again, it executes the second function when you want it to execute the first function.
The best way to solve this problem is to use something smarter than Toggle. You need to either detect whether the popup is open and act accordingly or store some state on whether it's open or not. You can't use Toggle because it isn't smart enough for your application.
In working with your actual code, I also found that handling the mouseup event in the document is not very compatible with handling the click event in the object. The issue is that mouseup comes before click so you would get both events in sequence and you wouldn't get the effect you want. When I changed to a click in the document, it worked a lot easier like this:
$("#general_show").click(function () {
var $this = $(this);
if ($this.hasClass('selected')) {
$this.removeClass('selected').parent().next().hide();
} else {
$this.addClass('selected').parent().next().show();
}
return(false);
});
$(document).click(function (e) {
if ($('#general_info').is(':visible') &&
$(e.target).parents('#general_info').length === 0) {
$('#general_show').removeClass('selected').parent().next().hide();
return(false);
}
});
Working example: http://jsfiddle.net/jfriend00/KTNAq/
score:0
$("#general_show").click(function () {
if( $(this).is('.selected') ){
$(this).removeClass().parent().next().hide()
}else{
$(this).addClass('selected').parent().next().show()
}
});
$(document).mouseup(function (e) {
if (
$('#general_show').is('.selected')
&& $(e.target).parents('#general_info').length === 0
&& $(e.target).attr('id')!== "general_show"
) {
$('#general_show').click()
}
});
score:0
$("#general_show").click(function () {
if ( $('#general_info').is(':visible') ){
// Hiding informations
$(this).removeClass('selected').parent().next().hide(); // try to always pass argument to removeClass, which class you want to remove
} else {
// Showin informations
$(this).addClass('selected').parent().next().show();
}});
$(document).mouseup(function (e) {
// We don't want to use this function when clicked on button
if (e.target.id == 'general_show') return;
if ( $('#general_info').is(':visible') ){
$('#general_show').removeClass().parent().next().hide();
}
});
JSFiddle link: http://jsfiddle.net/MEweN/5/
Related Query
- toggle function with ! in jquery
- how to use replaceWith() jquery function with toggle
- Checkbox toggle all with jquery Trigger function
- Bootstrap switch toggle function with Jquery and ajax
- Modify animate function with JQuery
- jQuery Toggle on mouseup
- Calling local function with Jquery
- Call PHP function with jquery $.ajax return json
- Problem with javascript function while using Jquery
- Create clone on another function with jquery
- continous console error with my jQuery auto complete function
- Exit confirm function and removing the function on submit with javascript and jQuery
- How to toggle button in button-group on page load in bootstrap3 with jquery
- jQuery toggle - Uncaught TypeError: undefined is not a function
- jQuery portfolio toggle messing with position
- Jquery function on parent dom object compile error with TypeScript
- jQuery animate() conflict with multiple function calls
- How to use jQuery when function with more postJSON queries?
- jQuery masked input plugin conflicts with jQuery Tools (at least with overlay)
- Toggle visibility with JQuery FOREACH row returned in cshtml
- Jquery - Pseudo-recursive function with "this" element
- How to use jQuery .live() function with COLORBOX plugin and hover event
- Problem with jquery inside OOP function
- Programatically number <h1-h6> with jQuery function
- jQuery click and toggle not working with class or ID
- Call function with current reference in jquery template
- PHP Loop with jQuery hide/slide toggle (Repeater field WP)
- JS function to coffeescript, with jQuery .map and Selectors as param
- Toggle Text with Jquery with Text Displays
- jQuery toggle NextUntil parent tr of td with class
- jquery toggle 3 state with initial state
- issue with jquery and settimeout function , showing popup block on browser
- Triggering click with jQuery to hit code-behind function not working in 1.4 - Worked fine in 1.3.2
- How do I change the $ function in jquery for another word for make it compatible with other frameworks
- Getting a callback function to trigger after clicking on an alert with JQuery
- Add/Remove Class with jquery function
- JavaScript jQuery Variables i should avoid using that conflicts with Global variables
- how to make a show/hide toggle button with jquery
- How to catch keyboard input with jQuery .keyup() function
- passing number to function for loop with jquery
- jQuery Toggle with multiple unique DIVs?
- Stupid issue with animate function of jQuery
- Jquery Toggle function not working!
- Javascript function pointers with Jquery causing domManip is not a function error
- Javascript Function With JQuery POST Always Returns undefined
- get the clicked element jquery with onclick function
- How can I apply a jQuery function to all elements with the same class.?
- Bug in jQuery 1.9.1 with function $.inArray
- How can i use jquery slide toggle with class?
- Is it possible to chain multiple events with one function in jQuery
More Query from same tag
- Kendo UI datasource custom transport for supporting CORS in IE 8 and IE 9
- Cannot parse JSON array
- Spring MVC - Mapping JSON object from Ajax post request to Java object
- How can I get value of editorfor and assign this value to another editorfor?
- jquery $.post error when called from Bootstrap Modal
- Highcharts. Is it possible to show data labels programmatically
- jquery replace each input with it's value. then switch/toggle back to having inputs
- Apache Makes some AJAX Request Behave Synchronously
- event handler for clicking a link to ajax call
- Change html onclick value with jQuery
- jQuery: Is it possible to refresh the page when clicking a button in a dialog... and keep the dialog open?
- Closing a Jquery UI dialog from inside
- Speeding up this jQuery-code with selectors
- Smooth Transition Between Background Images
- How can I re-write this code without jQuery?
- Smoothscroll.js blocking scroll on opera but if removed breaks sticky header
- How to capture the browser window close event on PHP?
- jquery v1.7.1 select() function don't work in IE9
- JavaScript code or framework for converting columns to rows and rows to columns in HTML table or div grids
- Struts2 jquery tabbedpanel
- How to position the element using absolute position?
- JQuery Droppable Highlight on Hover
- Filter Json data in jquery easyautocomplete
- JQuery Fade On Hover Effect - help?
- File Upload works fine as a form, but as an AJAX query returns 403
- JS/jQuery - Play GIF only once on hover
- Using Codeigniter's Upload Library with Uploadify (Uploadifive)
- content distribution network (CDN): Loading CSS or Javascript library
- Using the <button> tag and jQuery in IE8
- mouseleave not working in jquery