html
html
xxxxxxxxxx<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery Toggle Example with "See more" and "See less" buttons</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style> /* Some basic styling for demonstration */ .paragraph { margin: 20px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; display: none; /* Initially hide the paragraph */ } .button { cursor: pointer; color: blue; text-decoration: underline; margin: 10px; }</style></head><body><p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.</p><button class="see-more button">See more</button><button class="see-less button" style="display:none;">See less</button><script>$(document).ready(function(){ $(".see-more").click(function(){ $(".paragraph").slideDown(); $(".see-more").hide(); $(".see-less").show(); }); $(".see-less").click(function(){ $(".paragraph").slideUp(); $(".see-less").hide(); $(".see-more").show(); });});</script></body></html>Source: chat.openai.com
Twitter 
LinkedIn