The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Merge HTML Codes, Combine TABs and Collased sections
knobwan
post 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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
copychick
post 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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th July 2020 - 08:45 PM