JSBin link: http://jsbin.com/4QLDC/6
Here is the JS code snippet that I have written:
var toggleContent = function (event) {
$(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
var windowHeight = $(window).height();
var windowWidth = $(window).width();
if (windowWidth < 980) {
$(".headBar1").siblings().hide();
$(".headBar1").parent().css("min-height", 0);
$(".headBar1").css("cursor", "pointer");
$(".headBar1").on("click", toggleContent);
}
else {
$(".headBar1").siblings().show();
$(".headBar1").parent().removeAttr("style");
$(".headBar1").css("cursor", "auto");
$(".headBar1").off("click", toggleContent);
}
};
$(function () {
showOrHidePanels();
});
$(window).resize(function () {
showOrHidePanels();
});
This is my desired outcome:
If the window width is less than 300px, I want:
- The content box to collapse
- The headings to turn into clickable links
- When a heading is clicked, its corresponding content box should toggle visibility
While the first two are functioning as expected, I am encountering difficulties with the third requirement. The behavior seems to be inconsistent - sometimes it works flawlessly but fails at other times (for example, resizing the "Result" frame multiple times in the JSFiddle page). What could be causing this unpredictability? How can I resolve this issue?