I'm having trouble with my jQuery hide and show functions. They seem to be working, but the items are not appearing on the page. I suspect it could have something to do with a parent element being positioned relative or having a display of none, but I haven't been able to identify the issue. Below is the code snippet:
HTML:
<div id="newsItem1">
<h4><a href="/news">News Title 1</a></h4><h4>April 6, 2015</h4>
<p>Text here</p>
</div>
<div id="newsItem2">
<h4><a href="/news">News Title 1</a></h4><h4>April 6, 2015</h4>
<p>Text here</p>
</div>
CSS:
#newsItem1, #newsItem2 {
display:none;
}
JS:
setInterval(NextNewsItem, 8000);
var newsItem = 0;
var numNewsItems = 2;
function NextNewsItem() {
newsItem++;
if (newsItem > numNewsItems) {
newsItem = 1;
}
console.log(newsItem);
for (i = 1; i <= numNewsItems; i++) {
console.log($("#newsItem" + i).css('display'));
$("#newsItem" + i).hide();
console.log($("#newsItem" + i).css('display'));
}
console.log($("#newsItem" + newsItem).css('display'));
$("#newsItem" + newsItem).show();
console.log($("#newsItem" + newsItem).css('display'));
}
The first iteration shows:
1
none
none
none
none
none
block