Trying to filter content with jQuery, all content showing on page load

Support
#1

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/
The code I am using is basically a re-purposed version of the toggling found on this page: https://arsasphalt.com

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.

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.
#posts-grid .x-cell:not(:first-of-type) {display: none !important;}

#2

Hello @RinardMedia,

Thanks for writing in! Regretfully what are you requesting requires custom coding. Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Here is what I can recommend, you can utilize the new Slider element. Use Looper Provider to get the Post Categories and then nest another Looper Provider inside each slide to display 1 post item from a category. You can then use the Slider’s Custom Attribute in creating the slide navigation. This is a complicated feat using the Slider element. It will need a good understanding on how the Slider work to make it possible. If you have not seen our Slider element in action, you can check it here:

And by the way, we also have Modern Sliders, a Course and Expansion pack which you can check it here:

Best Regards.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.