Do <a> tags have id ? 1

[ReportingAnalyst]

Hi,

I am building a tree with nested UL with several nested branches.

Is there a way I can add an id to a <a href> tag so that when I click on the <a> tag, then it expands based on the ElementID I clicked on. Or should I be using the UL id to expand on or collapse?

My UL code:

<ul id="menu">
  <li>
    <a href="#" onclick="s_Hide('4655'); return false;">Mgr1</a>
	<span id="4655" style="display: none">
    	<ul onClick="">
    		<li><a href="#">Mgr1</a></li>
    			<ul onClick="">
    				<li>Sub1</li>
    				<li>Sub2</li>
    				<li>Sub3</li>
    			</ul>
    		<li><a href="#">Mgr2</a></li>
				<ul onClick="">
    				<li>Sub4</li>
    				<li>Sub5</li>
    			</ul>
    		<li><a href="#">Mgr3</a></li>
    			<ul onClick="">
				    <li>Sub6</li>
    			</ul>
    		<li>Sub7</li>
    	</ul>
  </li>
</ul>

My Javascript function is:

function s_Hide(el){
	obj = document.getElementById(el).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}

I want to take out the <span> tags are they are inline and block level elements. Since the Javascript refers to an id, what do I associate this id with? Which element?

Thanks.

 

[Foamcow]

Yes, you can add an id attribute to any HTML element.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[ReportingAnalyst]

I am trying to remove the span tags and suplement them with the styled <UL> tags. Because I am told span are inline elements and not block elements. So I was wondering where to determine the style for the hidden UL tags on load of page.

My working sample is:

<ul id="menu">
  <li>
  	<input type="radio" checked id="empid" name="empid" value="4655">
    <a href="#" onclick="s_Hide('4655'); return false;">TopMgr</a>
	<span id="4655" style="display: none">
    	<ul>
    		<li>
    			<input type="radio" id="empid" name="empid" value="2109922">
    			<a href="#" onClick="s_Hide('2109922'); return false;">Mgr1</a>
    			<span id="2109922" style="display: none">
    		</li>
    			<ul>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8693">
    					Sub1
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8793">
    					Sub2
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8893">
    					Sub3
    				</li>
    			</ul>
    			</span>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40105">
    			<a href="#" onClick="s_Hide('40105'); return false;">Mgr2</a>
    			<span id="40105" style="display: none">
    		</li>
				<ul>
    				<li>
    					<input type="radio" id="empid" name="empid" value="40405">
    					Sub4
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="40805">
    					Sub5
    				</li>
    			</ul>
    			</span>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40589">
    			<a href="#" onClick="s_Hide('40589'); return false;">Mgr3</a>
    			<span id="40589" style="display:none">
    		</li>
    			<ul>
				    <li>
				    	<input type="radio" id="empid" name="empid" value="40599">
				    	Sub6
				    </li>
    			</ul>
    			</span>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40698">
    			Sub7
    		</li>
    	</ul>
    </span>
  </li>
</ul>

Thanks.

 

[cLFlaVA]

hi.

there shouldn't be anything between a closing </li> and an opening <li>. therefore, you should place your nested <ul>'s inside of the <li>, not outside.

as for defining the style - you would do so in a CSS file, and then include the CSS file using a <style> tag in the head.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ReportingAnalyst]

Ok. Here it is.

My CSS style is

.tabcontent{
display:none;
}

#menu {
  padding:0;
  margin:0;
  }
#menu li {
  list-style-type:none;
  }

#menu ul {
padding: 0;
margin: 5px;
list-style-type: none;
}

My Javascript function which worked for span tags to expand and collapse:
[code]
function s_Hide(el){
	obj = document.getElementById(el).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}

My HTML script:

<ul id="menu">
  <li>
  	<input type="radio" checked id="empid" name="empid" value="4655">
    <a href="#" onclick="s_Hide('4655'); return false;">TopMgr</a>
    	<ul class="tabcontent" id="4655">
    		<li>
    			<input type="radio" id="empid" name="empid" value="2109922">
    			<a href="#" onClick="s_Hide('2109922'); return false;">Mgr1</a>
				<ul class="tabcontent" id="2109922">
    				<li>
    					<input type="radio" id="empid" name="empid" value="8693">
    					Sub1
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8793">
    					Sub2
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8893">
    					Sub3
    				</li>
    			</ul>
    		</li>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40105">
    			<a href="#" onClick="s_Hide('40105'); return false;">Mgr2</a>
				<ul class="tabcontent" id="40105">
    				<li>
    					<input type="radio" id="empid" name="empid" value="40405">
    					Sub4
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="40805">
    					Sub5
    				</li>
    			</ul>
    		</li>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40589">
    			<a href="#" onClick="s_Hide('40589'); return false;">Mgr3</a>
				<ul class="tabcontent" id="40589">
				    <li>
				    	<input type="radio" id="empid" name="empid" value="40599">
				    	Sub6
				    </li>
    			</ul>
    		</li>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40698">
    			Sub7
    		</li>
    	</ul>
  </li>
</ul>

I am not able to expand or collapse the UL tags on clicking on a Mgr link. Any ideas what I could be missing.

Thanks.

 

[ReportingAnalyst]

I removed the class="tabcontent" and replaced it with style="display: none" for each UL tag and it works now.

 

[cLFlaVA]

preferred method might be to change the className attribute, rather than the style.display attribute, of the ul. this way you could set up two style classes separately and switch between them.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ReportingAnalyst]

Thanks for that tip. I replaced it with the CSS class name and should be easier to maintain too.

 

[kaht]

without the stars, eh?

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]