mi problema con este botón de leer más es que cuando lo cierro haciendo clic en #test_001 o #test_002, el botón de leer más permanece encendido: "leer menos" ¿cómo cambio esto?
$("#readmore_01").click(function(e){ e.preventDefault(); $("#test_001").toggle("fast"); window.scrollTo(170, 170); let name = $(this).html(); $(this).html("Read less"); if(name == "Read less"){ $(this).html("Read more"); } }); $("#readmore_02").click(function(e){ e.preventDefault(); $("#test_002").toggle("fast"); window.scrollTo(550, 550); let name = $(this).html(); $(this).html("Read less"); if(name == "Read less"){ $(this).html("Read more"); } }); $("#test_001").click(function(e){ e.preventDefault(); $("#test_001").toggle("fast"); window.scrollTo(170, 170); }); $("#test_002").click(function(e){ e.preventDefault(); $("#test_002").toggle("fast"); window.scrollTo(550, 550); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="content_01"> <div>Hi guys that's a test</div> <p id="test_001" style="display:none">Test</p> <div class="toggleBtn_01"> <i class="fa fa-plus" id="readmore_01">Read more</i> </div> </div> <div class="content_02"> <div>Hi guys that's a test</div> <p id="test_002" style="display:none">Test</p> <div class="toggleBtn_02"> <i class="fa fa-plus" id="readmore_02">Read more</i> </div> </div>Estas funciones se pueden abstraer un poco, por lo que solo necesita tener una sola función para alternar este comportamiento.
Primero, podemos definir Read more y Read less como constantes para una mejor reutilización (es decir, menos propensos a errores tipográficos, y si necesita actualizar el texto, solo necesita actualizar este valor constante en lugar de actualizar un valor de cadena en múltiples funciones ).
const READ_MORE = 'Read more'; const READ_LESS = 'Read less'; Luego, podemos agregar este controlador de clics a p y div.toggleBtn_0x para que al hacer clic en cualquiera de ellos se ejecute esta función.
.content_01 p, .content_01 div.toggleBtn_01, .content_02 p, .content_02 div.toggleBtn_02 Una vez que estamos en la función, podemos hacer que los elementos i y p cambien yendo al padre y luego encontrando los nodos relevantes.
let button = $(this).parent().find('i'); let text = $(this).parent().find('p'); Omití la funcionalidad scrollTo porque no estaba claro cómo funcionaba en este fragmento (probablemente porque el texto de ejemplo es muy corto), pero debería ser bastante sencillo implementarlo de nuevo como se describe en Desplazarse a un elemento con jQuery .
Ejemplo completo:
const READ_MORE = 'Read more'; const READ_LESS = 'Read less'; $('.content_01 p, .content_01 div.toggleBtn_01, .content_02 p, .content_02 div.toggleBtn_02').on('click', function(e) { e.preventDefault(); let button = $(this).parent().find('i'); let text = $(this).parent().find('p'); text.toggle('fast'); if (button.html() == READ_LESS) { button.html(READ_MORE); } else { button.html(READ_LESS); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="content_01"> <div>Hi guys that's a test</div> <p id="test_001" style="display:none">Test</p> <div class="toggleBtn_01"> <i class="fa fa-plus" id="readmore_01">Read more</i> </div> </div> <div class="content_02"> <div>Hi guys that's a test</div> <p id="test_002" style="display:none">Test</p> <div class="toggleBtn_02"> <i class="fa fa-plus" id="readmore_02">Read more</i> </div> </div>Su problema está en sus llamadas a la función test_00#.
Cuando hace clic en el texto de prueba, llama a las funciones test_00# que no tienen lógica para actualizar los botones Leer más/menos.
Agregue la siguiente línea en sus funciones test_00# para actualizar al hacer clic en el texto "Prueba".
document.getElementById("readmore_01").innerHTML = "Read more" $("#readmore_01").click(function(e){ e.preventDefault(); $("#test_001").toggle("fast"); window.scrollTo(170, 170); let name = $(this).html(); $(this).html("Read less"); if(name == "Read less"){ $(this).html("Read more"); } }); $("#readmore_02").click(function(e){ e.preventDefault(); $("#test_002").toggle("fast"); window.scrollTo(550, 550); let name = $(this).html(); $(this).html("Read less"); if(name == "Read less"){ $(this).html("Read more"); } }); $("#test_001").click(function(e){ e.preventDefault(); $("#test_001").toggle("fast"); window.scrollTo(170, 170); document.getElementById("readmore_01").innerHTML = "Read more" }); $("#test_002").click(function(e){ e.preventDefault(); $("#test_002").toggle("fast"); window.scrollTo(550, 550); document.getElementById("readmore_02").innerHTML = "Read more" }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="content_01"> <div>Hi guys that's a test</div> <p id="test_001" style="display:none">Test</p> <div class="toggleBtn_01"> <i class="fa fa-plus" id="readmore_01">Read more</i> </div> </div> <div class="content_02"> <div>Hi guys that's a test</div> <p id="test_002" style="display:none">Test</p> <div class="toggleBtn_02"> <i class="fa fa-plus" id="readmore_02">Read more</i> </div> </div>