Soy un principiante, y tratando de entender todo. Intenté usar <p> y funciona sin problemas, pero cuando inserto un texto como ul y li , no aparece
También intenté usar un div pero solo la parte <a> funciona, no ul y li . Espero que alguien pueda ayudarme.
$(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 class="more">Second paragraph.</p> <p><strong>Header key roles</strong></p> <ul class="more"> <li>trait 1</li> <li>trait 2</li> <li>trait 3</li> <li>trait 4</li> <li>trait 5</li> </ul> <a class="more-less">Read More</a> <p> end paragraph</p>texto fuerte
Hay dos problemas principales en su código. En primer lugar ul.more no es un elemento principal de la p en la que se hizo clic, por lo que parent parents().next() no es la lógica transversal correcta para usar. Como el elemento de destino es un hermano del que generó el evento, use siblings() .
En segundo lugar, debe configurar display: block en el ul oculto. Puede hacer esto a través de CSS, en la clase .main que alterna.
También tenga en cuenta que no puede anidar p elementos. Corregí esto en el siguiente ejemplo convirtiendo el elemento contenedor en un div .
jQuery($ => { $(".more-less").click(function() { let $more = $(this).siblings('ul.more').toggleClass("main"); if ($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 { 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> First paragraph then cuts... <p class="more">Second paragraph.</p> <p><strong>Header key roles</strong></p> <ul class="more"> <li>trait 1</li> <li>trait 2</li> <li>trait 3</li> <li>trait 4</li> <li>trait 5</li> </ul> <a class="more-less">Read More</a> <p> end paragraph</p> </div>Intente borrar display: none; de more class