Merge HTML Codes, Combine TABs and Collased sections |
Merge HTML Codes, Combine TABs and Collased sections |
knobwan |
Jun 6 2020, 10:59 PM
Post
#1
|
Group: Members Posts: 1 Joined: 6-June 20 Member No.: 27,381 |
Good evening ! I'm trying to create an HTML page to localy organize short pieces of texts that i have. Probably i'll have to insert my text together with the HTML code, which is not a problem. It would be a combination of several collapsible texts under each tab. Could someone help me merge these two codes below ? Thanks ! Tabs https://www.w3schools.com/howto/tryit.asp?f...=tryhow_js_tabs Collapsed text https://www.w3schools.com/howto/tryit.asp?f...apsible_animate |
copychick |
Jun 29 2020, 04:39 PM
Post
#2
|
Group: Members Posts: 5 Joined: 29-June 20 Member No.: 27,414 |
Based on the links you're using, use the tab example as your starter HTML.
Under any of the city ID's add: <button class="collapsible">Open Collapsible</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> Then in the CSS add-in the appropriate CSS: .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; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } |
Lo-Fi Version | Time is now: 24th April 2024 - 06:25 AM |