Hi there,
I’m not a programmer and don’t know how this might be done.
I am using this css and javascript to show text comments when people are clicking on links. This is the problem. When a link is clicked on the text for the actual link is shown correctly as it should. But when I continue and clicks on the second link I have to click twice - at the first click the comment from the first link is closed. Then I have to click one more time to have the text comment from the second link shown.
It would be great if when clicking on the second link etc. the text comment from the first link is closed and the comment for the second link is shown automatically - in one click. Also if there are more than two links with comments. Is this possible? Hope that someone can help. Any help is received gratefully. The code is shown below.
Thanks
John
The css:
.textarea {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:small;
text-align:justify;
color:#000000;
margin-bottom:0px;
margin-top: 0px;
}
.section {
display:block;
clear:both;
color:#000000;
margin-bottom:5px;
display: inline;
}
a.links {
color:#0547A9;
font-size: .95em;
}
a.links:hover {
color:#000000;
background-color: #FCFBC4;
}
.linkswrapper {
color:#000000;
margin-right:10px;
font-size: .95em;
}
.linkcomment {
border: 1px;
color:#000000;
background-color: #FCFBC4;
text-align: justify;
}
THE JAVASCRIPT:
<!-- CODE –>
<div class=“textarea”>HERE IS SOME TEXT THAT NEEDS FURTHER EXPLANATION IN LINKCOMMENTS<br />
<div class=“section”>
<span class=“linkswrapper”>[ <a href=“#” class=“links” onClick=“showComment(c_1, ‘linkComment1’); return false”>EXPLANATION1</a> ]</span>
<span class=“linkswrapper”>[ <a href=“#” class=“links” onClick=“showComment(c_2, ‘linkComment1’); return false”>EXPLANATION2</a> ]</span>
<span class=“linkswrapper”>[ <a href=“#” class=“links” onClick=“showComment(c_3, ‘linkComment1’); return false”>EXPLANATION3</a> ]</span>
<span class=“linkswrapper”>[ <a href=“#” class=“links” onClick=“showComment(c_3, ‘linkComment1’); return false”>ETC.</a> ]</span>
</div>
<div class=“section”>
<span id=“linkComment1” class=“linkcomment”></span>
</div>
</div>
<script language=“javascript” type=“text/javascript”>
var c_1 = ‘EXPLANATION1 SHOWN.’;
var c_2 = ‘EXPLANATION2 SHOWN.’;
var c_3 = ‘EXPLANATION3 SHOWN.’;
function showComment(comment, where) {
if (typeof(where) == “undefined”){
where = ‘linkComment’;
}
if(document.getElementById(where).innerHTML != ‘’) {
document.getElementById(where).innerHTML = ‘’;
}
else {
document.getElementById(where).innerHTML = “<br />” + comment;
}
}
</script>
<!-- END –>