I have a following problem:
I'm trying to make a sliding accordion menu (with accordion sub-menus
- those are not a problem) that is invoked by means of clicking on an
image map.
I have tried the following code:
<script type="text/javascript">
$(document).ready(function() {
$('div#po_info> div.woj').hide();
$('div#po_info> area').click(function() {
$(this).next('div.woj:hidden').slideDown('normal')
.siblings('div.woj:visible').slideUp('normal');
});
});
</script>
where div "woj" should be shown (or appear, or slide, or what-so-
ever :-) ) when clicked on the appropriate part of the image.
With the code above all "woj" divs are hidden (success) but when you
click on the imagemap nothing happens.
I'm an absolute newbe to jQuerry hence the question - Is there any
way to achieve that???
my testing site is (in Polish) at http://txp.ctpoland.pl/ctpoland
Thanx in advance for advice.
Sincere, Pawel Wrobel
part of HTML code:
<div id="po_info">
<h2>>> nasi agenci</h2>
<img src="../images/layout/polska.png" alt="Mapa Polski" width="254"
height="237" border="0" usemap="#Mapa" />
<map name="Mapa" id="Mapa">
<area shape="poly"
coords="18,148,18,158,23,162,27,156,52,171,58,173,54,177,65,192,76,185,72,174,88,147,94,144,88,134,79,138,63,123,60,128,51,126,43,137,36,135,26,141"
href="#dolnoslaskie" />
<area shape="poly"
coords="87,59,101,50,124,56,142,70,127,103,95,91,90,90,87,59"
href="#kujawsko-pomorskie" />
<area shape="poly"
coords="126,106,103,148,122,152,140,161,148,149,159,140,157,131,164,128,162,120,153,120,146,106,130,103"
href="#lodzkie" />
<area shape="poly"
coords="195,118,195,163,209,168,213,173,209,176,219,179,225,174,236,179,249,170,248,156,234,127,235,109,226,104"
href="#lubelskie" />
<area shape="poly"
coords="31,85,38,80,54,74,46,87,48,108,61,121,59,127,51,124,42,136,36,132,27,140,17,131,17,92"
href="#lubuskie" />
<area shape="poly"
coords="145,177,133,182,128,202,143,218,142,227,153,229,163,220,171,224,181,220,175,197,173,185,159,190,152,179"
href="#malopolskie" />
<area shape="poly"
coords="132,101,145,72,152,73,183,61,191,78,205,90,206,98,221,103,214,110,192,115,189,131,191,152,160,143,161,134,169,128,165,118,155,117,148,102"
href="#mazowieckie" />
<area shape="poly"
coords="75,177,85,184,91,185,89,189,95,196,100,192,108,184,110,167,113,152,101,150,95,151,93,146,76,175"
href="#opolskie" />
<area shape="poly"
coords="177,183,185,216,196,221,206,228,220,232,224,228,219,210,237,183,226,180,216,183,204,179,206,172,194,166"
href="#podkarpackie" />
<area shape="poly"
coords="212,20,225,29,234,61,239,85,223,101,208,97,207,89,195,77,187,61,200,56,211,44,206,29,212,19"
href="#podlaskie" />
<area shape="poly"
coords="71,16,75,38,81,54,98,48,123,52,133,44,126,36,132,26,114,24,112,16,118,16,120,13,103,1"
href="#pomorskie" />
<area shape="poly"
coords="116,154,112,179,110,185,102,194,124,221,135,212,125,202,128,186,131,178,141,175,137,164"
href="#slaskie" />
<area shape="poly"
coords="159,145,141,164,145,174,155,174,158,181,172,181,190,165,190,155"
href="#swietokrzyskie" />
<area shape="poly"
coords="136,25,130,36,138,44,127,55,145,70,151,71,164,65,197,53,207,43,202,29,208,21,174,23,142,20,136,24"
href="#warminsko-mazurskie" />
<area shape="poly"
coords="104,96,123,104,98,150,89,132,79,136,51,108,49,86,60,73,70,62,74,54,85,55,86,80,87,93"
href="#wielkopolskie" />
<area shape="poly"
coords="13,37,46,27,58,24,71,14,78,46,67,63,55,75,47,73,36,78,19,90,6,79,14,66,13,50,12,41"
href="#zachodniopomorskie" />
</map>
<p style="color: #888;" >Kliknij na województwo, aby zobaczyć<br /
>listę agentów CT Poland</p>
<div class="clr_line_dots2"></div>
<div class="woj" id="dolnoslaskie">
<h3>Woj. DOLNOŚLĄSKIE</h3>
<div class="slider">
<!-- ...content --> <h4>xxxx</h4>
<p>xxxxx</p>
</div>
</div>
<div class="woj" id="kujawsko-pomorskie">
<h3>Woj. Kujawsko-Pomorskie</h3>
<div class="slider">
<!-- ...content --> <h4>xxxx</h4>
<p>xxxxx</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div.slider> p').hide();
$('div.slider> h4').click(function() {
$(this).next('p:hidden').slideDown('normal')
.siblings('p:visible').slideUp('normal');
});
});
</script>
</div>
