How can I change my code to jQuery instead of pure JS?

I am trying to set a function on jQuery instead of pure JS and I am getting an error:

 15 | prev.css('height') = prev.scrollHeight + "px";
                                               ^ Expected an assignment or function call and instead saw an expression.

This is the actual code:

function expand(target)
{
  let prev = target.previousElementSibling;
  
  prev.style.height = prev.scrollHeight + "px";
  target.style.display = "none";
}
#p {
  height: 50px;
  overflow: hidden;
}

#read-more {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more' onclick="expand(this)">
    READ MORE
  </div>
</div>

And I am trying to set that here:

var toggleReadMore = function() {
    $('#read-more').click(function(e) {
        var prev = $(this).prev();            
        prev.css('height') = prev.scrollHeight + "px";
        $(this).hide();            
    });
};

What am I doing wrong?

2 answers

  • answered 2017-06-17 19:14 Mr. Alien

    You cannot assign the value like that, you need to change it to something like

    prev.css('height', prev.scrollHeight)
    

    Where the second argument accepts the scroll height. In case of multiple CSS properties, you can pass an object like

    prev.css({
      height: 'some height here',
      width: 'some width here'
    });
    

  • answered 2017-06-17 19:14 Omar Faruque

    ** Change 3rd line like below **

    var toggleReadMore = function() {
    $('#read-more').click(function(e) {
        var prev = $(this).prev();            
        prev.css('height', 50);
        $(this).hide();            
      });
    };