Show/Hide text button position

Question

I have this code:

<style type="text/css">
.toggleLink {
    color: #000;
    text-decoration: none;
}
.toggleLink:hover {
    cursor: pointer;
}
.elaboration {
    display: none;
}
</style>

<p>Lorem ipsum dolor sit amet, mel id dolore labore prompta... 
<span class="toggleLink" onclick="toggleDisplay('elaboration_1',this)">
<span>more</span></span> <span class="elaboration" id="elaboration_1">Delicata definiebas ut mei, molestiae scriptorem eu eam. Clita equidem te mei, vis vidisse persequeris at.
</span>
</p>

<script>
function toggleDisplay(id,a)
  {
  var elaboration = document.getElementById(id);
  if (elaboration.style.display == "block")
  {
  elaboration.style.display = "none";
  if(a) a.innerHTML="<span>more</span>"; // won't work with target=_self
  }
  else
  {
  elaboration.style.display = "block";
  if(a) a.innerHTML = "<span>less</span>";
  }
}
</script>

So, I would like the "less" button appears at the end of the expanded text, not in the same position as the "more" button. Is that possible? Thanks.

Answer 1

you need to switch this two line like:

<span class="elaboration" id="elaboration_1">
  Delicata definiebas ut mei, molestiae scriptorem eu eam. Clita equidem te mei, vis vidisse persequeris at.
</span>
<span class="toggleLink" onclick="toggleDisplay('elaboration_1',this)">
  <span>more</span>
</span>