jQuery: .toggle code atlernative not working on second click

Question

I'm making a website element containing a text box that would expand when a correct span is clicked. The span would toggle between having the mask of the box have parameters x, and parameters y (being default). In the Registering jQuery click, first and second click answer I found the right code. After tweaking the names it looked like this:

$('#more').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
      $('.text').css('clip', 'rect(0px,375px,220px,0px);');
      $(this).css('top', '815px;');
  } else {
    $('.text').css('clip', 'rect(0px,375px,800px,0px)');
      $(this).css('top', '235px;');
  }
  $(this).data("clicks", !clicks);
});

Unfortunately the code works only on the first click, and only for the .text element (the more span does not move at all).

What could be wrong with this code, and how can it be fixed? Would be glad for any help.

Also. For additional information: -html of the portion

<div class="txtbox">
    <div class="text">       
        <p>Lorem ipsum</p> 
    </div> 
</div>
<span class="extbutton" id="more">more info:</span>

And the styles of inner elements:

.text{
    display: block;
    float: left;
    position:absolute;
    width: 375px;
    height: 700px;
    color: white;
    left: 315px;
    top: 18px;
    background-color:  rgba(0, 0, 0, 0.55);
    clip: rect(0px,375px,220px,0px); 
    z-index:0;

}

.text, #more{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.extbutton{
    color: white;
    display:block;
    width:100%;
    background-color: black;
    text-align: center;
}


#more{
    position:absolute;
    width:375px;
    left:315px;
    top:235px;
    z-index: 5;
}

Answer 1

$('#more').click(function(){
  
$('#textToHide').toggleClass('hideText');
});

.text{
    display: block;
    float: left;
    position:realtive;
    width: 375px;
    height: 200px;
    color: white;
    left: 315px;
    top: 18px;
    background-color:  gray;
   overflow:hidden;
}

.hideText{
   
   height:700px;
}

.text, #more{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.extbutton{
    color: white;
    display:block;
    width:100%;
    background-color: black;
    text-align: center;
}


#more{
    position:realtive;
    display:block;
    width:375px;
    
    
    z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div   class="txtbox">
    <div  id="textToHide" class="text ">       
        <p>Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p> 
    </div> 
</div>
<span class="extbutton " id="more">more info:</span>