How To Create Accordion Style Navigation Menus for Your Listings

In our recent client spotlight we hi-lighted a site that uses expandable sidebar menu’s to link to their listings. That effect is created using a WordPress Plugin called J Shortcodes.

Between a combination of the dsIDXpress link-structure and J Shortcodes, you can create the same effect for your own real estate blog.

Here’s how…

Installing Your Widget:

First thing you’ll want to do is add a new text widget to the place in your sidebar where you’d like your new expandable menu’s to appear. In the case of MattPernice.com it looks like he decided to title his widget “Quick MLS Search.”

Once you’ve given your widget a title, add the following html into the text area of your widget:

[jaccordion size=”xsmall” theme=”cupertino” active=”0″]
By Price – Irvine::
<a href=”http://www.mywpplayground.com/idx/city/irvine/?idx-q-PriceMin=200000&idx-q-PriceMax=300000″>$200,000 – $300,000</a>
[jacc/]
By Price – Alisso Viejo::
<a href=”http://www.mywpplayground.com/idx/city/alisso-viejo/?idx-q-PriceMin=200000&idx-q-PriceMax=300000″>$200,000 – $300,000</a>
[/jaccordion]

Replace “mywpplayground.com” with your own site’s domain where you have dsIDXpress installed and change the price values for as many price areas as you’d like to link to. You’ll have to insert links for your various price ranges of course, just do so in a new line.

Hit publish, and you’re all set to go with your new accordion style navigation menus!

If you have any questions or run into any problems, just let me know in the comments and I”ll help you out. And if you happen to install this on your own blog, link to it for the rest of us to see!