Question

I currently added a collapsible paragraph function to my webpage. I used the code that I found on http://www.javascriptsource.com/miscellaneous/expand-collapse-paragraph.html#comment_listing. Basically, I have a very long paragraph that is hidden until the button is clicked, but you have to scroll all the way back to the top to click on the same button to collapse the paragraph. I was wondering if there a way where I can add a “close” button at the end of the paragraph so that I don’t have to scroll to the top.

Thank you.

Here is the code for js, css, and html files:

CSS

input.button {
  color: #fff; background: #0034D0;
  font-size: .8em;
  font-weight:bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: solid 1px #ffcf31;
}

external JavaScript file named: expandCollapse.js

function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

BODY section of HTML document before actual paragraph

<center><input type="button" class="button" onClick="return toggleMe('para1')" value="Animation Characters Guide"></center>
    <div id="para1" style="display:none">

    </div>

If I want to add a “close” button, would it be a “a href” tag?

Answer 1

If I want to add a “close” button, would it be a “a href” tag?

Yes, You could use a link:

<a href="#" onclick="toggleMe('para1'); return false"> hide </a>

or you could use another button:

<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?" />