Accordion w. icons, 0.01

Developer
Daniel
Size
2,497 Kb
Views
22,264
  1. Accordion w. icons, 0.01 Previews
  2. Accordion w. icons, 0.01 HTML Codes
  3. Accordion w. icons, 0.01 CSS Codes
  4. Accordion w. icons, 0.01 JS Codes

How do I make an accordion w. icons, 0.01?

What is a accordion w. icons, 0.01? How do you make a accordion w. icons, 0.01? This script and codes were developed by Daniel on 05 October 2022, Wednesday.

Accordion w. icons, 0.01 Previews
IQ Test

Accordion w. icons, 0.01 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion w. icons, 0.01</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="accordion">Section 1</button>
<div class="panel"> <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel"> <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel"> <p>Lorem ipsum...</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Accordion w. icons, 0.01 - Script Codes CSS Codes

body{ font-family:"helvetica neue", helvetia, arial, sans-serif; font-size:16px!important; font-weight:300;
}
button { font-size:16px; font-weight:400;
}/* Style the buttons that are used to open and close the accordion panel */
button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; margin-bottom:5px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover { background-color: #ddd;
}
/* Style the accordion panel. Note: hidden by default */
div.panel { padding: 0 18px; background-color: white; display: none;
}
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show { display: block;
}
div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0;
}
div.panel.show { opacity: 1; max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
button.accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 14px; color: #777; float: LEFT; margin-left: 5px; margin-right: 15px;
}
button.accordion.active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */
}

Accordion w. icons, 0.01 - Script Codes JS Codes

/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); }
}
Accordion w. icons, 0.01 - Script Codes
Accordion w. icons, 0.01 - Script Codes
Home Page Home
Developer Daniel
Username deeman
Uploaded October 05, 2022
Rating 3
Size 2,497 Kb
Views 22,264
Do you need developer help for Accordion w. icons, 0.01?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel (deeman) Script Codes
Name
Top Header w. shadowed bottom
Box v0.1
Subleveled Menu - Responsive and simple
Imagelinking
Sitemap for footer
Column Columns
The Awesome Responsive Form
Dropdown Menu
RWD Table v1.0
Gridwork
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!