Sidebar Filter Attributes Collapse

Hello,
I’ve got a product attribute type with more then 100 taxonomies. I have used the woodmart layered nav widget to show these filters in shop sidebar.
Is it possible to add a “show more” button and only show for example 10-15 first taxonomies only, so that following filters like price and brands are easier to see for the user without scrolling to long?
thanks in advance
greetings

Hello,

There is no option, unfortunately. Perhaps you can search for a plugin.

Best Regards

Just searched a bit.
Would something like this be possible if an ID can be set for the layered nav widget?

http://jsfiddle.net/MYM2C/

var limit = 10;
var list = $("#attribute_list");
var more = 0;

function tricky_hide(){
    var morec = 0;
    $("li", list).each(function(index) {
        if (index >= limit) {
            $(this).hide();      
            morec = index - limit + 1;
        }
    });
    
    if (!more) more = morec;

    if (more) {
        list.append('<li class="more">' + more + ' more</li>');
        return true;
    }
    return false;
}
    

if (tricky_hide()) {
    list.live("mouseover", function() {
        $("li", list).each(function(index) {
            $(this).show();
        });
        $("li.more", list).hide();
    });

    list.live("mouseout", function() {
        tricky_hide();
    });
}

Sorry, but we are not responsible for such kind of additional customizations. The code seems to be correct but we can’t say exactly.

Sadly, to try this code, I would need to edit the ID of the layered nav widget.

Maybe you could give me a recommendation how to do this? Maybe some plugin or hint?

IDs are different for each widget. Here is an example how you can get it with inspection tool https://gyazo.com/a702f8c5c72b43871463ee285bbaa784

Hi,
could you please give me a hint what to do with the code to implement the show more button into the widget?

I have found out that the code should be working adding some code to child themes functions.php
Here is the part I added to the functions:

function my_theme_scripts_function() {
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js/hide.js');
}
add_action('wp_enqueue_scripts','my_theme_scripts_function');

and then I added a hide.js file into themes js folder using the ID of the widget i want to add the show more :

var limit = 10;
var list = $("#woodmart-woocommerce-layered-nav-14");
var more = 0;

function tricky_hide(){
    var morec = 0;
    $("li", list).each(function(index) {
        if (index >= limit) {
            $(this).hide();      
            morec = index - limit + 1;
        }
    });
    if (!more) more = morec;
    if (more) {
        list.append('<li class="more">' + more + ' more</li>');
        return true;
    }
    return false;
}
if (tricky_hide()) {
    list.live("mouseover", function() {
        $("li", list).each(function(index) {
            $(this).show();
        });
        $("li.more", list).hide();
    });

    list.live("mouseout", function() {
        tricky_hide();
    });
}

but it’s not working yet.
maybe I just made some mistake in the function file?
should it be named “my_theme_scripts_function” or woodmart_scripts_function” for example?

thank for your help

The code that adds a JS file to your page is correct and suppose to work well. Unfortunately, it is hard to say how the script should work so we can’t check it.

@webresultat

Place this code on woodmart’s custom JS

Replace
#woodmart-woocommerce-layered-nav-2

with your id selector but DO NOT remove the > div > ul

Now you will have a read more / less and the list will expand and contract

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

$('#woodmart-woocommerce-layered-nav-2 > div > ul').find('li:gt(4)').addClass('toggletr').hide()
.end().append(
  $('<tr><td class="show_more_btn">Read more »</td></tr>').click(function(){
      $(this).siblings('.toggletr').toggle();
      if($(this).hasClass('expanded')){
          $(this).text('Read more »');
          $(this).removeClass('expanded');
      } else{
          $(this).text('Read less «');
          $(this).addClass('expanded');
      }
 })
);

  });

@webresultat

https://gyazo.com/5d25b4f09fe08b8fc642d7d4655eec73

Thank you so much for helping me here. But could you be more specific please?
I have added it once in “custom JS” and tested and then also put it into “on document ready” and tested but nothing happens.
Do I have to put some code somewhere else so that it will work?
Actually I have not set child theme, but original theme.
I also have cloudflare under development mode. and purged all caches.
Thank you!

Attachments:

You must be logged in to view attached files.

[Author]

Posts