<div class="wrap-collabsible"> <input id="collapsible" class="toggle" type="checkbox"> <label for="collapsible" class="lbl-toggle">More Info</label> <div class="collapsible-content"> <div class="content-inner"> <p> QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven Development. </p> </div> </div> </div> CSS: input [ type = 'checkbox' ] { display : none ; } .wrap-collabsible { margin : 1.2rem 0 ; } .lbl-toggle { display : block ; font-weight : bold ; font-family : monospace ; font-size : 1.2rem ; text-transform : uppercase ; text-align : center ; padding : 1rem ; color : #D
Posts
Showing posts from 2024
Collapsible widgets
- Get link
- Other Apps
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; } </style> </head> <body> <button type="button" class="collapsible">Click & Chat with Agent</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var coll = document.getElements