html - Anchor a page when a paragraph is expanded via javascript -
i have web page dynamically creates comments. comments minimized , can expanded using "more" link. when click more link page jumps top of page. wanted make such when more button clicked full comment shown , page remains in location of comment.
html
<div tal:condition="not comment.pending_review"> <tr> <td>${ comment.account.email }</td> <td> <p class="more_text" style="width: 250px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis" >${ comment.comment }</p><a name="${ comment.id }" id="${ comment.id }" data-id="comment" class="more_link" href="#">more</a></td> <td><span class="star" tal:repeat="number [i in range( comment.star_rating )]"> <span class="fa fa-star"></span> </span> </td> </tr> </div>
javascript
$('.more_link').click(function(){ $('.more_text').css({'width': '', 'white-space': '', 'overflow': '', 'text-overflow': ''}); $(this).hide(); var anchor_id = $(this).attr('name'); location.hash = "#" + anchor_id; });
what if use button instead of a ? delete "href=#" part, makes jump top - suggestion :)
Comments
Post a Comment