JQuery not working correctly in Firefox
I have the following code that expands and hides all content for expanding and antialiasing. The problem I am running into is that the individual elements are not closing correctly. They should work correctly in FF and IE.
The problem is when everything expands and you close it individually .. it closes the second one even if you didn't click on the second one. there is some impermanence. Try to close the last or second last couple of times after expanding each time and you will be closing the second random item or the next one next to it.
It doesn't happen all the time. The problem is visible in firefox
I am very grateful for your help.
Here is the below code and fiddle and screen capture
Javascript
var prevId;
function showDiv(id) {
var infoDiv = "#" + id + "-moreinfo";
var plusDiv = "#" + id + "-plus";
var minusDiv = "#" + id + "-minus";
if($(infoDiv).is(":visible")){
removeHash();
$(plusDiv).show();
$(minusDiv).hide();
$(infoDiv).slideUp(200);
}else{
window.location.hash = id;
$(minusDiv).show();
$(plusDiv).hide();
$(infoDiv).slideDown(250);
}
if(prevId != undefined){
if(prevId.valueOf() != id.valueOf()){
$("#" + prevId + "-moreinfo").slideUp(200);
$("#" + prevId + "-plus").show();
$("#" + prevId + "-minus").hide();
}
}
prevId = id;
}
/***
* removeHash()
* Initiates an HTML5 feature to clean URL hashes.
* Requires HTML5 Standards or IE10 or higher. Safe fallback for older browsers.
**/
function removeHash(e){
/* pushState adds to the browser history, or replaceState which keeps the history uniformly clean */
if (history.replaceState){
/* HTML5 browsers, including IE10+ */
history.replaceState("", document.title, window.location.pathname + window.location.search);
} else {
/* Other browsers */
window.location.hash = '';
return false;
}
}
/***
* isNumber(value)
* Boolean function checking if value is numerical.
**/
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
/***
* Manupulates CSS to show css butons on expand and close. Also, expands and closes all violations
**/
$(document).ready(function(){
if (window.location.hash) {
/* Clean the hash, stripping out the preceding symbol, as showDiv() needs numbers */
var clean_hash = window.location.hash.replace('#','');
var text = $(this).text();
console.log("text " +text);
console.log("clean_hash " +clean_hash);
console.log("text " );
/* Check if the hash is a number before attempting to expand */
if (isNumber(clean_hash)) {
showDiv(clean_hash);
/* tiny wait before scrolling */
window.setTimeout(function() {
/* Uses jquery.scrollto library: http://balupton.github.io/jquery-scrollto/ */
//Scroll down to the item h3 violation header text.
$('#post-'+prevId+' h3.viol-header').ScrollTo({
duration: 350,
easing: 'linear',
});
}, 800);
}
}
/**
** This shows the content when the user clicks on Expand all and also switches the plus and minus
**/
$("#Hide").hide();
$("#Show").click(function(e){
removeHash(e); //Reset the hash
$("div.moreinfo").slideDown(200);
$("div.plus").hide().removeClass("closed");;
$("div.minus").show().addClass("opened");
$("#Show").html("Expand All").addClass("expanded");
$("#Show").hide();
$("#Hide").show();
e.preventDefault();
});
/**
** This code hides the ontent when the user clicks on Expand all and also switches the plus and minus
**/
$("#Hide").click(function(e){
removeHash(e); //Reset the hash
$("div.moreinfo").slideUp(200);
$("div.plus").show().addClass("closed"); ;
$("div.minus").hide().removeClass("opened");
$(".message").html("Collapse All");
$("#Show").show();
$("#Hide").hide();
e.preventDefault();
});
});
source to share
It looks like it kept the previous one prevId
before Show All / Expand All was clicked. You will need to reset to prevId
- undefined
when the Show All / Expand All buttons were clicked.
I added this line to the top of your functions $("#Show")
and $("#Hide")
and it seems to work.
prevId = undefined;
http://jsfiddle.net/rtxmpq8h/54/
Steps to recreate this problem:
Expand All> Collapse 1 Div> Collapse All> Expand All. Then collapse another div. It should collapse that div and the first div you collapsed. I can recreate this in any browser.
source to share