Hide hyperlink once it's been clicked (javascript)

Question

I'm currently using this code:

:javascript
  function showstuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="block";
  }
  function hidestuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="none";
  }

%div{ :id => "#{g.id}"}

  %h3 #{g.title}

  %p 
    #{g.excerpt}

  %a{:id => "more#{g.id}",:onclick => "showstuff('content#{g.id}')"} Read More

  %div{ :id => "content#{g.id}", :style => "display:none;"}

    %p #{g.content}


    %a{ :onclick => "hidestuff('content#{g.id}')"} Show Less

Which shows the bottom div once the first link (read more) is clicked, then hides it again when the second link (show less) is clicked. I want the first link to disappear once it's been clicked. So when the bottom div is visible, the read more link is not.

Answer 1

Maybe this will help you.

HTML

<div id="main" class="hide">
    <a id="more" onclick="showhide();">Read More</a>

    <div id="content">
        <p>div content</p>
        <a id="less" onclick="showhide();">Show Less</a>
    </div>
</div>

CSS

#main a { cursor: pointer; } /* without href attribute there's no pointer */
#content { background: lightgray; } /* just for display purposes */
#main.hide #more { display: inline; }
#main.hide #content { display: none; }
#main.show #more { display: none; }
#main.show #content { display: block; }

JAVASCRIPT

function showhide() {
    main_div = document.getElementById('main');
    if (main_div.className == 'hide')
        main_div.className = 'show';
    else
        main_div.className = 'hide';
}