[Resolved] Split: showing option to show extra search fields

[Author]

Posts

[lisaM-7]

Hi toolset team

I am following the videos and designing the archive page for a directory site. I am stuck on a couple of things, I hope you can help:

2. Is there a way to make a selection of (extra) search fields appear when the user selects ‘Additional search options’? I was trying to put the search fields in a conditional block but then got confused about how to set up the ‘Additional search options’ Yes/No radio buttons to trigger the conditional search fields appearing. Is there a way to do this?

I hope this sort of makes sense. Happy to be referred to documentation/videos to follow.

Many thanks, Lisa

[Waqar]

Hi,

If you've added the custom field "Additional search options?" only to control the display of additional search fields in the search, you don't need that field and it can be removed from the field group "Field Group for Programs".

To add a container for the additional fields with the show/hide links, you can follow these steps.

1. In the archive where you'd like to show the link to show/hide the additional fields container, you can add a "Custom HTML" block and include the HTML code for the links to show and hide the additional fields container:

<a href="#" id="additional-fields-container-link-show">Show Additional fields</a>
<a href="#" id="additional-fields-container-link-hide">Hide Additional fields</a>

2. Next, add a container block and include the search field blocks for all the additional fields in this block. In the ID settings of this block add a special ID "additional-fields-container".
( screenshot: hidden link )

3. In the archive's custom CSS, include the following CSS code, to hide the show/hide additional field links, when the page initially loads:

#additional-fields-container-link-show,
#additional-fields-container-link-hide {
display:none;
}

4. In the archive's custom JS, include the following script, to control the display of the links and container that holds the additional fields:

jQuery( document ).ready(function() {
	jQuery('#additional-fields-container-link-show').show();
	jQuery('#additional-fields-container').hide();

	jQuery('#additional-fields-container-link-show').click(function(){
		event.preventDefault();
		jQuery('#additional-fields-container').show();

		jQuery('#additional-fields-container-link-show').hide();
		jQuery('#additional-fields-container-link-hide').show();
	});
	jQuery('#additional-fields-container-link-hide').click(function(){
		event.preventDefault();
		jQuery('#additional-fields-container').hide();

		jQuery('#additional-fields-container-link-hide').hide();
		jQuery('#additional-fields-container-link-show').show();
	});
});

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[lisaM-7]

Hi Waqar
Thank you for all the detailed instructions. Unfortunately I can't get it to work properly.

Steps 1-3 followed but the Show/Hide text does not appear at all on the archive page. How do users select it?

Step 4: I have added this in the 'appearance - custom layouts' section where I add code but it is just showing the text on the archive page so I'm sure I am doing something wrong.

Could you check on the staging5 website and see where I'm going wrong? Same login credentials. thank you so much

kind regards

Lisa

[Waqar]

Thanks for writing back.

To include the custom script only on the archive pages, you can place it inside the archive's "Custom JS" field.
( screenshot: hidden link )

Alternatively, to include this script across the website through the "custom layouts" you'll need to wrap it inside the script tag and attach it to the "wp_footer" action:

<script type="text/javascript">
...
</script>

I've made these changes in the custom layout "Show additional fields in search tool" and it is working now.