Flat accordion

Developer
Soufiane Abid
Size
3,349 Kb
Views
40,480
  1. Flat accordion Previews
  2. Flat accordion HTML Codes
  3. Flat accordion CSS Codes
  4. Flat accordion JS Codes

How do I make an flat accordion?

Flat Accordion :D Free PSD here : https://www.behance.net/gallery/35967755/flat-Accordion-PSD-HTML. What is a flat accordion? How do you make a flat accordion? This script and codes were developed by Soufiane Abid on 12 October 2022, Wednesday.

Flat accordion Previews
IQ Test

Flat accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flat accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="accordion"> <div class="item"> <img src="https://f9ir.github.io/acc/acc/img/Location-Pin.png" alt=""> <h3>Location</h3> </div> <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <div class="item"> <img src="https://f9ir.github.io/acc/acc/img/Headphones.png" alt=""> <h3>Music</h3> </div> <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <div class="item"> <img src="https://f9ir.github.io/acc/acc/img/Lightbulb.png" alt=""> <h3>Notes</h3> </div> <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <div class="item"> <img src="https://f9ir.github.io/acc/acc/img/Bookmarks.png" alt=""> <h3>Books</h3> </div> <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <div class="item"> <img src="https://f9ir.github.io/acc/acc/img/Lightning-Bolt.png" alt=""> <h3>Tendances</h3> </div> <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat accordion - Script Codes CSS Codes

@font-face { font-family: "JF Flat Regular"; src: url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.eot"); src: url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.eot?#iefix") format("embedded-opentype"), url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.svg#JF Flat Regular") format("svg"), url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.woff") format("woff"), url("https://f9ir.github.io/acc/acc/font/JF-Flat-regular.ttf") format("truetype"); font-weight: normal; font-style: normal;
}
body { background: #f6704b;
}
* { margin: 0; padding: 0;
}
.accordion { margin: 50px auto; width: 380px; background: #ccc; cursor: pointer;
}
.accordion .item { height: 100px;
}
.accordion .item h3 { display: inline-block; vertical-align: middle; height: 100%; padding-left: 50px; font-family: "JF Flat Regular"; font-size: 20px; font-weight: 400;
}
.accordion .item img { padding-left: 15px; width: 30px; vertical-align: middle;
}
.accordion .item h3:before { content: ""; display: inline-block; vertical-align: middle; height: 100%;
}
.accordion .item:first-of-type { background: #620808; color: #f4ce74;
}
.accordion .item:nth-of-type(2) { background: #a53f3f; color: #ffe9c1;
}
.accordion .item:nth-of-type(3) { background: #f4ce74; color: #620808;
}
.accordion .item:nth-of-type(4) { background: #ffe9c1; color: #d5441c;
}
.accordion .item:last-of-type { background: #d5441c; color: #ffe9c1;
}
.accordion p { font-family: "JF Flat Regular"; font-size: 18px; font-weight: 400; padding: 15px; display: none; box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);
}
.accordion p:first-of-type { background: #620808; color: #f4ce74;
}
.accordion p:nth-of-type(2) { background: #a53f3f; color: #ffe9c1;
}
.accordion p:nth-of-type(3) { background: #f4ce74; color: #620808;
}
.accordion p:nth-of-type(4) { background: #ffe9c1; color: #d5441c;
}
.accordion p:last-of-type { background: #d5441c; color: #ffe9c1;
}

Flat accordion - Script Codes JS Codes

(function ($) { 'use strict'; $('.item').on("click", function () { $(this).next().slideToggle(100); $('p').not($(this).next()).slideUp('fast'); });
}(jQuery));
Flat accordion - Script Codes
Flat accordion - Script Codes
Home Page Home
Developer Soufiane Abid
Username SoufianeAbid
Uploaded October 12, 2022
Rating 4.5
Size 3,349 Kb
Views 40,480
Do you need developer help for Flat accordion?

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!

Soufiane Abid (SoufianeAbid) Script Codes
Name
Egg hover
Rotation
One click to copy
Canvas loading
Sandal Adidas PURE CSS
R4
Myprofile
Small UnderLine
Timeline CSS
Samatic
Create amazing blog posts 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!