Actually there is no relation. I just use classes
<div class="dealer New-Jersey Brooklawn" style="display: block;">
<h3>
</h3>
<div class="info">Rt. 130 at Brooklawn Circle, Brooklawn, NJ, 08030 Phone: 856-456-4777 Fax: 856-456-4777</div>
</div>
The classes are generated from TVs. Each dealer has a TV for State and one for City
the ditto call is <div class="dealerSearch"><div class="scroll-pane">[[Ditto? &tpl=`dittoTplDealer`]]</div></div>
the js can be found in the source. I used jquery
the ditto tpl is
<div class="dealer [+ProvinceState:safeClass+] [+RegionCity:safeClass+]">
<h3>[+pagetitle+] [+Website:makeWebsite+] [+Email:makeEmail+]</h3>
<div class="info">[+Address+] Phone: [+Phone+] [+Fax:makeFax+]</div>
</div>
- safeClass is a Phx custom snippet than creates a safe class name
- makeWebsite just checks if there is a value in the website TV and displays it if necessary
Then you just use your favorite javascript framework or plain javascript to show/hide div’s