Category Filter: .sf-option-active with parent category

Anonymous

#243804

Hey there – long time no questions! 😉 Hope all is well on your side of the pond.

I have a site staged with a filtered view here: https://maternalhealthhub.wp-goodness.com/resources/?_sft_category=culture-of-health-equity

I’m in the early phases of finalizing, so you’ll need to be in widescreen mode to properly see what I’m trying to do. As you’ll see, I’m trying to have parent categories in their own top row – with the active parent’s subcategories in the row below.

Right now I’m moving those children down with abs positioning into a fixed-height space, which is a bit hacky. If I continue this route, I’ll have to add lots of styles for various screen widths – and adjust any time my client modifies categories. Ideally, I’d be able to move those children down in the DOM and allow the space for them to grow and flow with varying content.

The bigger issue is that these children are visible based on which parent has the class .sf-option-active. If I click one of the children, this class is removed from the parent, and there’s not another class assigned – like child-active or something – that I can use to keep the relevant children visible.

I’m not sure how to add js to try and address this without conflicting with built-in functionality. Could you point me in the right direction? Hope I’m making sense…

Thanks!

Trevor

#243837

As you are using radio buttons, this is a problem, as you can’t do what you want with CSS. Essentially, you want to style the parent (display) based on a class on the child (sf-option-active). CSS cannot do this (the lack of a reverse selector has been much discussed), so your only option is to create a function to do much the same. This search offers some help:

https://www.google.com/search?q=Apply+CSS+styles+to+an+element+depending+on+its+child+elements&oq=Apply+CSS+styles+to+an+element+depending+on+its+child+elements

Anonymous

#244333

As mentioned, I had expected to have to add js for this, but wasn’t sure how to prevent conflicts with plugin js – and keep things working with ajax functionality. I’m not a js master… but I did manage to hobble something together:

jQuery( document ).ready( function($) {

   // Set parent cat to active, if subcat is active
   keepActiveCats = function() {
      $( 'li' ).has( 'li.sf-option-active' ).addClass( 'sf-option-active' );
   }

   keepActiveCats();

   // Copy subcats of active parent and place below parent filters
   moveActiveSubcats = function() {
      $( '.sf-field-category .sf-option-active .children' ).clone().appendTo( $( '.sf-field-category' ) );
   }

   moveActiveSubcats();

   // Reset cat states after ajax
   $( document ).ajaxComplete( function() {
      keepActiveCats();
      $( '.sf-field-category > .children' ).remove();
      moveActiveSubcats();
   });	
	
});

So far it’s working. Maybe someone else will find this helpful.

Trevor

#244488

Thanks for sharing. I will close this thread for now.

[Author]

Posts