hide/show checkboxes in the filter when you click on title

Anonymous

#113892

I have a search form with multiple post_meta fields.
Each post_meta field has checkboxes the user can select.
I would like to hide the checkboxes and only show them when a user click on the title of the search field or an arrow next to the title, then the options will be displayed.
How do I do this?
I’m trying to write javascript but I would like to add an arrow or use a class around the title, but it is just an <h4> tag. How do I add an arrow or a class?

Trevor

#113913

Hi

I do not know. I think you need to find an answer on StackExchange where the answer includes a jsfddle demo.

Anonymous

#116755

thanks I found some jquey

$(document).ready(function() {
$('.searchandfilter h4').each(function() {
$(this).prepend('<img src="xxx/wp-content/uploads/2017/06/1497224577_ic_keyboard_arrow_down_48px.png" class="arrow_down" /><img src="http://storenet.mgtestsite.com/wp-content/uploads/2017/06/1497224605_ic_keyboard_arrow_up_48px.png" class="arrow_up" style="display:none" />');
});

$( "li ul").addClass( "list" );

	 $(".searchandfilter h4").click(function() {
	  $(this).find('img').toggle();
	  $(this).nextAll('ul.list').first().toggle('slow');
	
});
});

[Author]

Posts