What I want is after clicking the ‘read more’ button, each div shows their entire unique content in a popup that I made with CSS. Can someone please help, I’m still new in jQuery
jQuery(function() {
var minimized_elements = $('p.first'),
text = $('p.first').contents();
minimized_elements.each(function() {
var t = $(this).text();
if (t.length < 100)
return;
$(this).html(t.slice(0, 100) + '<span>... </span><a href="#" class="more">More</a>');
});
$('a.more').click(function() {
$(text).appendTo('.popup');
});
});
.popup {
width: 40%;
margin: 0px auto;
background: black;
color: white;
text-align: center;
padding: 15px;
display: none;
}
<div class="test">
<div class='item'>
<p class="first">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
<p class="popup"></p>
</div>
<div class='item'>
<p class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quisquam eos veritatis placeat in maxime voluptates, incidunt magni dolorum, voluptas debitis aperiam expedita praesentium nulla quasi impedit inventore. Ratione, quisquam..</p>
<p class="popup"></p>
</div>