I am making a reviews widget using slick slider. Some reviews are long and I need to hide them and I am trying to use the readmore.js plugin for this. Everything works fine, before I decrease the resolution to the first breakpoint, after that when I press' "read more" button the page is moved to the top or if add "/" after "a href" in the code the page just remains in the same place.
Here is the slick slider part
<script src="https://assets.codepen.io/3490843/jquery-2.1.0.min.js"></script>
<script src="https://assets.codepen.io/3490843/readmore.min.js"></script>
<script src="https://assets.codepen.io/3490843/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple-items').slick({
autoplaySpeed: 3000,
autoplay: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
adaptiveHeight: true
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script>Readmore.js
<script>
$(function() {
$('.demo').readmore({
moreLink: '<a href="#">Read more...</a>',
lessLink: '<a href="#">Hide</a>',
collapsedHeight: 56,
speed: 200,
afterToggle: function(trigger, element, expanded) {
if(! expanded) { // The "Close" link was clicked
$('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100});
}
}
});
});
</script>What am i doing wrong?
You can use javascript:; to the default action of the event (e.g. following a link)
moreLink: '<a href="javascript:;">Read more...</a>',
lessLink: '<a href="javascript:;">Hide</a>',
OR
use jQuery ( Assuming you are using demo as a parent class )
$('.demo a').click(function(event) {
event.preventDefault();
});