adding proper functionality to code.Please read comments in code andfirst test it in your browser to

[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

 

[Tom de Neef]

<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'*/

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:

<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.