How to add read more or less button in table column

Question

What is best way to achieve this below?

Suppose my front end table look like this:

id  | usernname | role url
 1  | JHON      | /welcome... readmore

On initial load it should show just one url, but when the user clicks on read more then role url show all data like this:

id  | usernname | role url
 1  | JHON      | /welcome ,/addnew ,/product, /purchase

Is there any good way to achieve this? Note this role url can contain more url ie it is dynamically increasing.

Answer 1

The example below shows how you can add a click event to a span within the URL cell. This then toggles a class within the parent cell which shows/hides the URLs depending on the current state. This relies on you loading two spans, one with the condensed URLs, and one with all the URLs.

I've added some styling to help the user understand the interactivity.

Alternative - instead of loading two spans (which needs you to add /welcome twice), you can create a span with just class .long with the extra URLs. This is demonstrated in row 2 with username b.date.

Update: added a button that starts a timeout to show dynamically adding URLs, if you add a URL you should add a class to the parent td so that it knows it has multiple URLs, this will let you show the show more/less link. It adds it using the unique row id that I have added.

Let me know if this isn't what you wanted.

 // Add click event to each element with class toggle-more // This is dynamic, so will work on any new 'show more' $('#user-list').on('click', '.toggle-more', function(){ // toggle 'more' class in the closest parent table cell $(this).closest("td").toggleClass("more"); // Change text of link if ($(this).text() == "show more") { $(this).text("show less"); } else { $(this).text("show more"); } }); // Click event to start adding URLs $("#addURL").click( function() { addURL(); $(this).remove(); }); // Add a new URL function addURL() { // Add a new URL, you will have to select the appropriate row in real use - ie replace #user-1 with a unique row identifier $("#user-1 .url-list .toggle-more").before("<span class='url long'> ,/newURL</span>"); // Add a class to the table cell so we know there are multiple URLs, again you will need to replace #user-1 with your unique row identifier. $("#user-1 .url-list").addClass("multi-url"); // Continue adding URLs var addURLtimer = setTimeout(addURL, 3000); } 

 td .long { display: none; } td.more .long { display: inherit; } td.more .short { display: none; } .url, .toggle-more { float: left; } .url { padding-left: 4px; } .toggle-more { display: none; padding-left: 4px; color: blue; text-decoration: underline; cursor: pointer; } .multi-url .toggle-more { display: inherit; } table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid black; } th, td { padding: 4px; text-align: left; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="user-list"> <tr> <th> id </th> <th> username </th> <th> role url </th> </tr> <tr id="user-0"> <td> 0 </td> <td> j.smith </td> <td class="url-list multi-url"> <span class="short url">/ welcome</span> <span class="long url"> /welcome ,/addnew ,/product, /purchase</span> <a class="toggle-more">show more</a> </td> </tr> <tr id="user-1"> <td> 1 </td> <td> b.times </td> <td class="url-list"> <span class="url">/ welcome</span> <span class="toggle-more">show more</span> </td> </tr> </table> <button id="addURL">Start Adding URLs</button>