Member Avatar for harsha.netpem

Hello,
Check the code is given below:-

<ol style="font-family: Arial; font-size: 12px; text-align: justify; width: 486px; line-height: 20px;">
<li><a href="#A" onclick="javascript:document.getElementById('A').style.display='block'">A</a> </li>
<div id="A" style="overflow: auto; height: 100px; width: 500px; display: none; background-color: #e0eeee;">
<p style="font-family: Arial; font-size: 14px; text-align: justify;  line-height: 20px; color: #700000; text-decoration: none;"><a name="A">A details</a></p>
<ol style="font-family: Arial; font-size: 12px; text-align: justify; width: 486px; line-height: 20px;">
<li><strong><em>gsdfgdfgdfgdfgbcbcv bnnvgnbv</em></strong></li>
<p>ngngfjghjghjghjghjg</p>
<li><strong><em>hgfhgfhgf:</em></strong></li>
</ol> 
<p style="font-family: Arial; font-size: 12px; text-align: justify; width: 486px; line-height: 20px;">Apparel using fabrics with asbestos fibres  cannot be exported to EU.</p>
</div>
<li><a href="#B" onclick="javascript:document.getElementById('B').style.display='block'">B</a></li>
<div id="B" style="overflow: auto; height: 100px; width: 500px; display: none; background-color: #e0eeee;"><a name="B">
<p style="font-family: Arial; font-size: 14px; text-align: justify; width: 486px; line-height: 20px;"><strong>B details</strong></p>
</a> <ol style="font-family: Arial; font-size: 12px; text-align: justify; width: 486px; line-height: 20px;">
<li><strong><em>Tris (2,3 dibromopropyl) phosphate (EC No. 204-799-9; CAS  No. 126-72-7)</em></strong><br /> Shall not be used in  textile articles intended to come into contact with the skin such as garments,  undergarments and linen</li>


</ol></div>
<li><a href="#C" onclick="javascript:document.getElementById('C').style.display='block'">C </a></li>
<div id="C" style="overflow: auto; height: 100px; width: 500px; display: none; background-color: #e0eeee;"><a name="C">
<p style="font-family: Arial; font-size: 14px; text-align: justify; width: 486px; line-height: 20px;"><strong><span style="text-decoration: underline;">C details </span></strong></p>
</a>
<p style="font-family: Arial; font-size: 12px; text-align: justify; width: 486px; line-height: 20px;"><strong><em>Mercury  compounds</em></strong><br /> Shall not be used as substances and  constituents of mixtures intended for use in the impregnation of heavy-duty  industrial textiles and yarn intended for their manufacture;</p>
</div>

</ol></div>

please run the script above,there is one problem, when i open the link A,B and C then i get the hidden window on their appropriate link no issue in that, but i have one problem i want the output in this type when i click any link i.e A,B and c then the opened(previous link) link is automatically closed and open new link which i click.

Please guide me.

  • 2 Contributors
  • 3 Replies
  • 4K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

Below is an example of what I think you want:

<html>

<head>

<script>

function show(id){
	hideAll();

	document.getElementById(id).style.display = 'block';
}

function hideAll(){
	var divs = document.getElementsByTagName('div');

	for(var i = 0; i < divs.length; i++){
		divs[i].style.display = 'none';
	}
}

</script>

<style>

a{cursor: pointer;}

</style>

</head>

<body>

<ul>
	<li>
		<a onclick="show('A');" style="cursor: pointer">Click to show A</a>
		<div id="A" style="display: none;">Show A</div>
	</li>
	<li>
		<a onclick="show('B');" style="cursor: pointer">Click to show B</a>
		<div id="B" style="display: none;">Show B</div>
	</li>
	<li>
		<a onclick="show('C');" style="cursor: pointer">Click to show C</a>
		<div id="C" style="display: none;">Show C</div>
	</li>
	<li>
		<a onclick="show('D');" style="cursor: pointer">Click to show D</a>
		<div id="D" style="display: none;">Show D</div>
	</li>
</ul>

</body>

</html>
Member Avatar for harsha.netpem

Thanks for your support,this coding is working fine but i want to use this code in joomla articles.and i tried but its not working.
Can you tell me how can i use this code for articles(content page) in joomla 1.5.20.

Member Avatar for stbuchok

Sorry, I don't use Joomla, not going to be able to help there.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.