Skip Navigation

[Resolved] How to create the Advanced Search Toggle on Real Estate Site

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to recreate the "Advanced Search" filter toggle system from the Real Estate reference site on my own site, but it doesn't seem to be working. I've copied the markup and JavaScript from the reference site into my own site, but the advanced filters are not hidden when the page loads and the toggle button to show/hide filters does not work.

Solution: Three more components are necessary:
1. The Real Estate site uses the Bootstrap library to show and hide elements, so you should update your Toolset settings in Toolset > Settings > General tab to use Bootstrap
2. The CSS from Layouts CSS and JS on the Real Estate site does not seem to be present in your site, please check those styles and apply them as needed in your site's Layouts CSS editor.
3. There is a wrapper div around the filters on the Real Estate site with the CSS class "filter-list". That seems to be needed for the styles in the Layouts CSS editor to be applied correctly. Please add this wrapper element in your staging site.

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Beth 4 years, 6 months ago.

Assisted by: Christian Cox.

Author
Posts
#1660569

Tell us what you are trying to do?
Create the Advanced Search Toggle like on the Real Estate Site's House Search Page
hidden link

Is there any documentation that you are following?
I have a test site at hidden link
I've copied the contents of the search-house View and the JS code, but it does not work. What am I missing?

Is there a similar example that we can see? Both of the Above

What is the link to your site?
hidden link

#1663443

Hi, can you share some screenshots showing how you added the JavaScript to your staging site? I am unable to find it on the site right now.

#1663457

I had been playing with the View and removed the JavaScript. I have re-added it under the Search and Pagination JS Editor where it also exists in the Real Estate Site. It does not work though.

#1663631

Three things I noticed:
1. The Real Estate site uses the Bootstrap library to show and hide elements, so you should update your Toolset settings in Toolset > Settings > General tab to use Bootstrap
2. The CSS from Layouts CSS and JS on the Real Estate site does not seem to be present in your site, please check those styles and apply them as needed in your site's Layouts CSS editor.
3. There is a wrapper div around the filters on the Real Estate site with the CSS class "filter-list". That seems to be needed for the styles in the Layouts CSS editor to be applied correctly. Please add this wrapper element in your staging site.

Once these changes are made, I can take another look and see if anything is missing. Let me know if you have questions about these changes.

#1668175

I thought I closed this and replied, but it isn't showing here. Apologies. Your suggestions fixed my issue. The Advanced Search toggle is working now.
Thank you for your help.