[Resolved] Hide container when post list is empty

It probably wouldn’t be so bad since the sections that feature a list are further down the home page and not immediately visible. If we set it up to hide the specific sections by default and only appear when there is content it might just appear like the page is just loading elements.

I’m no expert but I was thinking of maybe some kind of script that checks for a post entry in a specific list ID and if posts found in the list it would add a class to the list ID. The class could then have an attribute like ‘display:block’ that overrides the initial “display:none” attribute. Just a thought.

I’m happy to give this a crack myself but if you are able to assist I’d appreciate it.

Hey Tom,

The URL is http://janek-dev.flywheelsites.com/
If you scroll down to the very bottom theres a section with no posts. I can give you admin access if you need.

The password to view the site is the same as before, you should have an email from me containing those details from a few weeks back, if not I can resend.

Thanks for taking a look.

Hey Tom, I’ve forwarded the original email I sent. Let me know if you don’t receive it.

Hey Tom, thanks for helping with this.

With your code, I get ‘Uncaught SyntaxError: Unexpected token .’ for the .length within my browser. Any ideas?

Still wasn’t working so I had a blind man’s tinker and somehow managed to find the problem.

In the end the only remaining problem was you had an ID instead of a class designated for the container. What I ended up using was:

jQuery( document ).ready( function( $ ) {
    if ( $( '.wpsp-no-results' ).length ) {
        $( '.wpsp-no-results' ).closest( '.generate-sections-container' ).hide();
    }
} );

And it works perfectly! Such a good result for such a small amount of code.

Thanks so much for helping with this. Now I also know how to use the .closest tag. 🙂

Hey Tom,

Sorry to drag this one back out, but I’m having an issue with this. I have a second WP Show Posts list that should hide when empty but it doesnt. This is due to the fact that it doesnt apply a .wpsp-no-results class when empty.

I’m completely at a loss why it wouldnt apply that class to itself like the other one on the page, I’ve tried to recreate it with a new list as well, and same thing happens.

To view the section with the list in it you can access my staging site:
http://staging.janek-dev.flywheelsites.com/

Username to view the site is collaborator… and surely you know what the password is by now. 😉

I’ve been doing tests here to no avail. If you access the page source and search for .wpsp-no-results you can see that it only appears once and thats in the #upcoming-airshows div section which has hidden automatically with the code you supplied earlier. The other one that should hide is the #next-episode div, but its not it just sits there and wont add the no results class to itself even though its empty.

I still need to reply to your other posts on here, and I apologise for not getting to them sooner. The site proper launched last night and leading up to it I’ve been doing last minute bug fixes. Obviously I didnt catch them all. 😛

Awesome, that seems to work perfectly. Thanks.

Although do you know why the other Show Posts container wasnt having the no-results class applied to it?

Seems quite odd.