Read More Function for <li> <ul> <li> tag using jQuery with Paragraph-CodePudding

I'm a beginner, and trying to understand everything. I tried using <p> and it works smoothly but when I insert a text like a ul and li it wont show up

I also tried using a div but only the <a> part is working not the ul and li. I hope someone can help me.

$(document).ready(function() {
  $(".more-less").click(function() {
    $(this).parent().prev('ul.more').toggleClass("main");
    if ($(this).parent().prev('ul.more').hasClass('main')) {
      $(this).text('Read Less');
    } else {
      $(this).text('Read More');
    }
  });
});

.more {
  text-align: left !important;
  display: none;
}

.more-less {
  /* position: absolute; */
  /* right: -30px; */
  /* top: -34px; */
  color: #e43330 !important;
  text-align: center;
  float: left;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p style="text-align: left;">First paragraph then cuts...
  <p >Second paragraph.</p>
  <p><strong>Header key roles</strong></p>
  <ul >
    <li>trait 1</li>
    <li>trait 2</li>
    <li>trait 3</li>
    <li>trait 4</li>
    <li>trait 5</li>
  </ul>
  <a >Read More</a> &nbsp;
  <p> end paragraph</p>

strong text

CodePudding user response：

Try delete display: none; from more class

CodePudding user response：

There's two main issues in your code. Firstly the ul.more is not a parent element of the clicked p, so parents().next() aren't the correct traversal methods to use. As the target element is a sibling of the one which raised the event, use siblings().

Secondly, you need to set display: block on the hidden ul. You can do this through CSS, on the .main class which you toggle.

Also note that you cannot nest p elements. I corrected this in the example below by converting the containing element to a div.

// you can't nest p elements, use a div container instead
// parent is the containing element, yet the ul.more is a sibling, so use siblnigs()

$(document).ready(function() {
  $(".more-less").click(function() {
    $(this).siblings('ul.more').toggleClass("main");
    if ($(this).siblings('ul.more').hasClass('main')) {
      $(this).text('Read Less');
    } else {
      $(this).text('Read More');
    }
  });
});

.more {
  text-align: left !important;
  display: none;
}

.more.main {
  display: block;
}

.more-less {
  /* position: absolute; */
  /* right: -30px; */
  /* top: -34px; */
  color: #e43330 !important;
  text-align: center;
  float: left;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div style="text-align: left;">
  First paragraph then cuts...
  <p >Second paragraph.</p>
  <p><strong>Header key roles</strong></p>
  <ul >
    <li>trait 1</li>
    <li>trait 2</li>
    <li>trait 3</li>
    <li>trait 4</li>
    <li>trait 5</li>
  </ul>
  <a >Read More</a> &nbsp;
  <p> end paragraph</p>
</div>