Pop up 1 of 3 divs with same class but different contents

Community
#1

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>
#2

you need .next() to select the paragraph element with popup class which is after is after the clicked link, so something like $(this).next('.popup')

i would use .on('click', function()) given the click element is added to the page dynamically. Using on() is more robust. (given how jquery implemented JavaScript event listeners)

and you need .css() to change the display from hidden to none

http://api.jquery.com/on/
http://api.jquery.com/next/
http://api.jquery.com/css/

3 Likes