I'm having trouble adjusting the font size of my text within the <div class="comment more>. Whenever I try to wrap the text in a <p>, the "more toggle" functionality stops working properly. Instead of revealing more text when I click on "more", the entire text simply disappears. Additionally, styling the font-size within .comment more doesn't seem to have any effect.
I'm new to JavaScript, so any advice would be greatly appreciated.
$(document).ready(function() {
var ellipsestext = "...",
moretext = "More",
lesstext = "Less",
showChar;
$('.more').each(function() {
var content = $(this).html();
showChar = content.search(/<!\-\-\s*break\s*\-\->/);
if (content.length > showChar && showChar != -1) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function() {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});a {
color: #108cff;
}
a:visited {
color: #108cff;
}
a.morelink {
text-decoration: none;
outline: none;
font-style: italic;
}
.morecontent span {
display: none;
}
.comment more {
font-size: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="first" class="story" data-speed="4" data-type="background">
<div id="wrapper">
<article>
<div class="comment more">
An international competition to choose the stadium’s design
<!-- break -->
architect and builders is expected to be held in November.
</div>
</article>
</div>
</section>