Estoy tratando de crear una opción dinámica de mostrar más y menos contenido usando jquery. El problema es que mis resultados provienen de un bucle for, entonces, ¿cómo puedo obligar a jquery a cargar solo 20 resultados en la página y luego cargar el resto cuando hago clic en el botón Mostrar más? Además, el botón debe cambiar a "mostrar menos" cuando la lista se expande y al hacer clic en él volverá a mostrar solo los primeros 20 resultados. A continuación se muestra mi código
HTML
echo html_writer::start_tag('div', array('id' => 'establishment')); echo html_writer::start_tag('h5'); echo get_string('institutions', 'block_solr'); echo html_writer::end_tag('h5'); echo html_writer::end_tag('div');jQuery
var institutionList = $.getJSON({'url': location.protocol + '//' + location.host + currentdirpath + '/establishment.json', 'async': false}); institutionList = JSON.parse(institutionList.responseText); console.log(institutionList); for (var i = 0; i < institutionList.data.length; i++) { $('#establishment').append('<div class="form-check"> <input class="form-check-input size-filter-check" type="checkbox" value="'+ institutionList.data[i].altname +'" id="est-check" data-size="">\n' + ' <label class="form-check-label" for="size-check">\n' + institutionList.data[i].fullname + ' </label> </div>'); } $('#establishment').append('<a href="#" class="show-more">Show More</a>');Si desea consultar una cantidad específica, esa fuente de datos debe estar preparada para ello. Si no le importa obtener más, puede ocultar/mostrar esos registros adicionales en el lado FE.
// keeping some state would help let listExpanded = false; // wrapping all rendering procedure in one function too function renderInstitutionList() { //here you clear previous render $('#establishment').empty() // you can trim your array to certain size with code below //[...] syntax is to avoid mutating original list [...institutionList.data].splice(0, limit) // and here you do your thing with the loop }Sin embargo, hay toneladas de otras soluciones. Probablemente podrías hacer eso solo con html/css