Изменить размер шрифта с помощью «more toggle»

Question

Я пытаюсь изменить размер шрифта моего текста в <div class="comment more>. Но когда я положил <p> вокруг и текст, «больше переключений» больше не будет работать. Когда я нажимаю «больше», текст просто исчезает полностью. Ни когда я не начертил размер шрифта на .comment more, он ничего не сделает. Я новичок в Js, пожалуйста, советую мне.

$(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 + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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>

Answer 1

есть ошибка со следующим CSS -

.comment more{ 
font-size: 50px; 
} 

Правильный путь -

.comment.more{ 
font-size: 50px; 
} 

Полный код

$(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 + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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>