SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help needed css/javascript

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

  2. #2
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or is this not easy to do. Hope that someone has a solution..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •