JavaScript code not responding

Question

I am trying to implement the read more and read less feature on click on link for my articles app in Django . But my JavaScript code is not responding when I click on the read more link.

Here are my files.

 $(document).ready(function() { var $el, $p, $up, $ps; $('.button').on("click", function() { $el = $(this); $p = $el.parent(); $up = $p.parent(); $ph = $up.find(".para"); $ps = $up.find(".rest-content"); if ($ps.is(':hidden')) { $p.load(function() { $ps.show(), $el.html("(read-less)"), $ph.hide(), console.log("It worked"); }); } else { $ps.hide(); $el.html("(read-more)"); $ph.show(); } return false; }); }); 

 {% if article.post|length > 300 %} <p class="para">{{ article.post|truncatechars:300}}</p> <p class="rest-content">{{ article.post}}</p> <p class="read-more"><a href="#" class="button" >(read more)</a></p><br> {% else %} <p class="para">{{ article.post }}</p> <br> {% endif %} 

Answer 1

Many of your jQuery calls do not have the correct syntax. For example:

$ph = $up.find(".para");

Should be

$ph = $($up).find(".para");

In order to use the jQuery functionality. Re-write your code with this in mind and see if that works :)