Create A Collapsible Section On Your Website Using HTML CSS
How To Create A Collapsible Section On Your Website Using HTML CSS?
I like to create user interfaces (UIs) and often require a section to expand and the FAQ section for example. I would reach out to NPM and install a library to help, until I discovered that you can do it with pure HTML elements! They are probably not named most explicitly:
Details-
A data element is a content element that we want to display and hide. The summary feature is a caption that describes what is hidden, in the FAQ section this may be a question and the answer is hidden in the details section until further notice. You can turn the data feature on and off with JavaScript if needed in your operating system by setting the open feature on it. It is also straightforward to style the arrow, you can see this in the example below where I used emoji instead but this can be anything you want.
Steps To How To Create A Collapsible Section...
We Will Work With Very Few HTML Codes. The HTML Code Is Given Below To Create a Collapsible Section For Your Convenience.
<details>
<summary>
<span class="icon_border"><span class="icon"> ⏏ </span> </span>
User Group Create Table SQL Code And SQL Code To Insert Some Data !!
</summary>
<div class="collapsible-content">
<div class="content-inner">
<p>
Quint Is A Call To One Of The JavaScript Embedded Objects, And The Fast JavaScript Program Can Also Be Used Its Beautiful, Well-written, And Functional Applications Using JS, HTML Pages Modernize Is A Popular Browser Externally Plug-ins. Test Driven Development.
</p>
</div>
</div> details {
user-select: none;
margin: 1.2rem 0;
}
details .collapsible-content .content-inner {
background: rgba(0, 105, 255, .2);
border-bottom: 1px solid rgba(0, 105, 255, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0.5rem 1rem;
font-family: Inter, sans-serif;
font-size: 16px;
color: black;
line-height: 1.5;
}
details>summary span.icon {
transition: all 0.3s;
transform: rotate(450deg);
}
details[open] summary span.icon {
transform: rotate(540deg);
}
summary {
display: flex;
font-weight: bold;
font-family: Inter, sans-serif;
font-size: 18px;
/* text-transform: uppercase; */
text-align: center;
padding: 8px;
color: #fff;
background: #ab1010;
cursor: pointer;
border-radius: 7px;
transition: all 0.25s ease-out;
align-items: center;
}
summary::-webkit-details-marker {
display: none;
}
.icon_border {
padding: 4px 6px 5px 6px;
outline: 0;
border-radius: 50%;
background: #2ab29b;
margin-right: 15px;
margin-left: 15px;
}
.icon {
flex-shrink: 0;
display: inline-block;
background-position: center;
} Now We Will Use The Complete HTML CSS Code Together.
<!--DOCTYPE html-->
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
details {
user-select: none;
margin: 1.2rem 0;
}
details .collapsible-content .content-inner {
background: rgba(0, 105, 255, .2);
border-bottom: 1px solid rgba(0, 105, 255, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0.5rem 1rem;
font-family: Inter,sans-serif;
font-size: 16px;
color: black;
line-height: 1.5;
}
details>summary span.icon {
transition: all 0.3s;
transform: rotate(450deg);
}
details[open] summary span.icon {
transform: rotate(540deg);
}
summary {
display: flex;
font-weight: bold;
font-family: Inter,sans-serif;
font-size: 18px;
/* text-transform: uppercase; */
text-align: center;
padding: 8px;
color: #fff;
background: #ab1010;
cursor: pointer;
border-radius: 7px;
transition: all 0.25s ease-out;
align-items: center;
}
summary::-webkit-details-marker {
display: none;
}
.icon_border {
padding: 4px 6px 5px 6px;
/* position: absolute; */
outline: 0;
border-radius: 50%;
background: #2ab29b;
margin-right: 15px;
margin-left: 15px;
}
.icon {
flex-shrink: 0;
display: inline-block;
background-position: center;
}
</style>
<title></title>
</head>
<body>
<details>
<summary>
<span class="icon_border"><span class="icon">⏏</span></span> User Group Create Table SQL Code And SQL Code To Insert Some Data !!
</summary>
<div class="collapsible-content">
<div class="content-inner">
<p>Quint Is A Call To One Of The JavaScript Embedded Objects, And The Fast JavaScript Program Can Also Be Used Its Beautiful, Well-written, And Functional Applications Using JS, HTML Pages Modernize Is A Popular Browser Externally Plug-ins. Test Driven Development.</p>
</div>
</div>
</details>
</body>
</html> 
Summary-
In short, you can use what the browsers offer you to create a growing and compelling category. It will be accessible to all users as it is semantic HTML. It will be much faster to load as there is HTML and a few lines of CSS. Not only that, but it will respond to any screen size.
🔗 Demo Application-
URL- Demo Application
Username - demo, Pass- demo
I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================
🙍🏾 Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel
Many thanks for visiting the site.
Then Enjoy.........................