Justify text in show hide div with CSS and Javascript

Question

I have a function to show/hide text and it works fine. I have two issues, however:

1. I cannot justify the text although I have specified this property in my CSS and in the JavaScript.
2. I cannot get rid of the line break when displaying the text. I would like to concatenate it. The only way to have the text justified is to consider it as a new paragraph, which I want to avoid.

Here is the Javascript function (it could be better, I know)

    function showHide(mytext) {
     if (document.getElementById('mytext1')) {
            if (document.getElementById('mytext1' + '-show').style.display != 'none') {
                document.getElementById('mytext1' + '-show').style.display = 'none';
                document.getElementById('mytext1').style.display = 'inline';
                document.getElementById('mytext1').style.textAlign ='justify';
            } else {
                document.getElementById('mytext1' + '-show').style.display = 'inline';
                document.getElementById('mytext1').style.display = 'none';
            }
        }

}

Here is some HTML

     <p class="NeueLite text-justify"> Beginning of the text.<a id="mytext1-show" onclick="showHide('mytext1'); return false;" class ="abstract"> More</a>
               <div id="mytext1" style="display: none;" class="moretext">
    Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.Hidden/shown text.
 <a id="mytext1-hide"  onclick="showHide('mytext1');return false;" href="javascript:void(0)" class="abstract" >Less</a></p></div>

And the classes of my CSS :

div.moretext {
   font-family: 'Comic Neue', sans-serif !important;
    font-weight: 100 !important;
      line-height: 1.2 !important;
      font-size: 0.8rem !important;
      text-align: justify !important;
      }

Answer 1

This is because you put the hidden text in a <div> . Use a <span> instead. Also, put the text-align: justify; in the <p> .

Working example