Question

I have a div to show recently viewed items on a page which I am hiding if it’s empty using innerHTML so the outer empty box doesn’t show and it works fine.
The problem is that it leaves a great big hole on the page until an item has been viewed.

What I have been trying to do is show another div if div id=”recentinc” is hidden which will in turn be hidden once div id=”recentinc” has content.

Here is my code so far:

<div id="recentinc"><?php include 'recentview.php'; ?></div>
<script type="text/javascript">
if (document.getElementById('recentinc').innerHTML == '')
    document.getElementById('recently_viewed').style.display = 'none';
</script>
</div>

I would like to have another div eg.

<div id="copy">more content</div>

that will show instead when div id=”recentinc” is hidden.

There may be a better way to do this with jQuery but I can’t find an answer.

Any help would be greatly appreciated.

Answer 1

As I understand it, you want to show/hide #copy based on the emptiness of #recentinc, and do the opposite for #recently_viewed.

var showRecent = $("#recentinc").children().length > 0;
$("#recently_viewed").toggle(showRecent);
$("#copy").toggle(!showRecent);