Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Merge HTML Codes

Posted by: knobwan Jun 6 2020, 10:59 PM

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?filename=tryhow_js_tabs

Collapsed text
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

Posted by: copychick Jun 29 2020, 04:39 PM

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;
}