adding proper functionality to code.Please read comments in code and first test it in your browser to see the effect.

[Mclaren Fan]

<style>
.tiles {
background-color:blue;
color:yellow;
width:200px;
padding:5px;
font-weight:bold;
}
#list1,#list2,#list3,#list4 {
display:none;
background-color:lightgreen;
margin-top:0px;
width:170px;
margin-bottom:10px;
}
</style>
<!--End of stylesheet-->
<script>
/* function will check if list1,list2,list3,list4, are displayed and
then hide them and if alreday hidden will

display them.my aim is to create a drop down menu. */
function checker(a) {
var propdisp=document.getElementById('list'+a).style.display;
if (propdisp=='block') {
document.getElementById('list'+a).style.display='none';
document.images.arrow1.src='downarrow.png';
/*the above line is where the problem is i dont want to change arrow1
everytime i want to change arrow2,3,4

according to the argument "a" passed to this function but i dont know
how to refer to the argument a after

arrow.will it be something like this---document.images.arrow
+a.src='downarrow.png'*/
}
else {
document.getElementById('list'+a).style.display='block';
document.images.arrow1.src='uparrow.png';
/*Same problem on the above line also*/
}
}
</script>
<div class="tiles" onClick="checker(1)">Home<img id="arrow1"
src="downarrow.png"

style="width:10px;height:10px;display:inline;"></div>
<ul id="list1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="tiles" onClick="checker(2)">Tutorials<img id="arrow2"
src="downarrow.png"

style="width:10px;height:10px;display:inline;" ></div>
<ul id="list2">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="tiles" onClick="checker(3)">Games<img id="arrow3"
src="downarrow.png"

style="width:10px;height:10px;display:inline;" ></div>
<ul id="list3">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="tiles" onClick="checker(4)">Contact<img id="arrow4"
src="downarrow.png"

style="width:10px;height:10px;display:inline;" ></div>
<ul id="list4">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
Source file for downarrow.png-----http://www.clker.com/cliparts/7/d/
2/1/119498562897811849tasto_3_architetto_franc_01.svg.med.png
Sorce file for uparrow.png------http://www.clker.com/cliparts/d/5/b/b/
11949856281555500779tasto_4_architetto_franc_01.svg.hi.png
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
please be kind enough to me to download these 2 files and save them
with the names downarrow.png and uparrow.png.
If anyone is not able to understand my problem please reply to
whatever u understood.

[Tom de Neef]

"Mclaren Fan" <himans...@gmail.com> schreef in bericht
news:d15f562f-af0e-4237...@f3g2000pri.googlegroups.com...

You know how to assign listX to propdisp. Can't you do the same with arrowX
?
currentArrow = document.images.getElementById('arrow'+a);

Tom

[Richard Cornford]

On Nov 8, 2:31 pm, Mclaren Fan wrote:
<snip>

> <script>
> /* function will check if list1,list2,list3,list4, are displayed
> and then hide them and if alreday hidden will
>
> display them.my aim is to create a drop down menu. */
> function checker(a) {
> var propdisp=document.getElementById('list'+a).style.display;
> if (propdisp=='block') {
> document.getElementById('list'+a).style.display='none';
> document.images.arrow1.src='downarrow.png';
> /*the above line is where the problem is i dont want to change
> arrow1 everytime i want to change arrow2,3,4
> according to the argument "a" passed to this function but i dont
> know how to refer to the argument a after

<snip>

document.images['arrow'+a].src = 'downarrow.png';

<URL: http://jibbering.com/FAQ/faq_notes/square_brackets.html >

Richard.