JavaScript Code to toggle between show and hide text

Here is some javascript code that you can copy and paste into a webpage. It can allow your webpage visitors to toggle between showing and hiding the full contents of a page beyond a certain point or within a range of lines. This is useful if you need to make a webpage appear shorter. Examples include FAQs pages.

This is what your visitors see when they land on the webpage

This is what your visitors see when they click on the 'Show More' link 

--

--

<script type="text/javascript">
    function showthecontent(){
        document.getElementById("showmore").style.display = "none";
        document.getElementById("thecontent").style.display = "block";
    }
    function hidethecontent(){
        document.getElementById("thecontent").style.display = "none";
        document.getElementById("showmore").style.display = "block";
    }
</script>
<a id="showmore" href="javascript:showthecontent();" title="Title Text">Show More ... </a>
<div id="thecontent" style="display:none">
    <a href="javascript:hidethecontent();" title="Title Text">Show Less ...</a>
    <div class="yourElements">
     
            Text to be hidden / shown
     
    </div>
</div>

---

Below is javascript code for a FAQs page.

<script type="text/javascript">
    function showthecontent(){
        document.getElementById("showmore").style.display = "none";
        document.getElementById("thecontent").style.display = "block";
    }
    function hidethecontent(){
        document.getElementById("thecontent").style.display = "none";
        document.getElementById("showmore").style.display = "block";
    }
</script>
<a id="showmore" href="javascript:showthecontent();" title="Title Text">QUESTION 00 HERE</a>
<div id="thecontent" style="display:none">
    <a href="javascript:hidethecontent();" title="Title Text">Hide Answer 00</a>
    <div class="yourElements">
   
QUESTION 00 HERE
    <br> 
ANSWER 00 HERE
    <br>
          <a href="javascript:hidethecontent();" title="Title Text">Hide Answer 00</a>
    </div>
</div>