Filtering content with jquery, all content showing on page load-CodePudding

We are working on a new website for our company and we are trying to implement the SEO keywords into blog posts to lessen the amount of pages on our site. How we decided to implement this was to set up a blog page that has the service categories listed (like pagination) so we can put out blog posts that help boost the SEO side of our site. The catch is, we want to consistently have one post per category listed at the top of each category, which isn't accomplished by the base theme and Wordpress' capability.

I'm using Themeco's Cornerstone theme and using the built in elements to accomplish this. I'm still new to JS and jQuery, but the toggle appears to be working. The issue I'm running into is that all of the categories' content load on page load until you select one of the options. I'd like to make it so that only one category appears when you first load the page. I think my main issue is my css, but I'm getting frustrated and can't find the issue.

Here is my code used:

JQuery:

jQuery ( function($) {

  $( '#blog-nav .x-cell' ).click(function(){
      var cellblock = $(this).attr('class'),
          cellClass = cellblock.substr( cellblock.lastIndexOf(' ')   1); 

      $(this).addClass('active-cell');

      $( this).siblings().each(function(){
       $(this).removeClass('active-cell');
      });

      $( '#' cellClass '-content' ).siblings().not('#blog-nav').each(function(){
       $(this).hide();
      });

      $( '#' cellClass '-content' ).show();
  });
});

CSS:

#blog-nav .x-cell:hover {
  cursor: pointer;
}

#blog-nav .x-cell:hover .nav-line,
#blog-nav .x-cell.active-cell .nav-line{
    width: 100% !important;
    transition: .2s ease-in-out;
}

#blog-nav .nav-line {
  transition: .5s ease-in-out;
  width: 25%;
}

Here is the link to the page in question: https://wordpress-669672-3159231.cloudwaysapps.com/test-page/

I've tried many different methods, but the toggle's didn't work the same when I adjusted, so I'm not sure if I just got lucky with the toggling.

#posts-grid .x-cell:not(:first-of-type) {display: none !important;}
This is what I have tried to add to the css and it hasn't worked. It's hiding the content indefinitely after selecting anything other than the first toggle.

CodePudding user response：

The problem with using !important is that it will override the display: block property and will keep the divs hidden no matter what.

What you could do instead is use the common class of the divs to hide them and then use the ID of the main div to display the first child. Since ID takes effect over class it will add the display block property to the first child.

Try adding this css and it should work.

Hope you have a great day!

.m56w-3b {
    display: none;
}
#posts-grid :first-child {
    display: block;
}