Simple Accordion Concept

Developer
Kyle Brumm
Size
4,955 Kb
Views
6,072
  1. Simple Accordion Concept Previews
  2. Simple Accordion Concept HTML Codes
  3. Simple Accordion Concept CSS Codes
  4. Simple Accordion Concept JS Codes

How do I make an simple accordion concept?

What is a simple accordion concept? How do you make a simple accordion concept? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Simple Accordion Concept Previews
IQ Test

Simple Accordion Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Accordion Concept</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> <header class="header"> <h1>Simple Accordion Concept</h1> <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>
<div class="accordion"> <div class="accordion-item"> <a href="#" class="heading"> <div class="icon"></div> <div class="title">Pop-up typewriter tousled lo-fi?</div> </a> <div class="content"> <p> Bespoke hammock flannel viral irony, single-origin coffee humblebrag sustainable aesthetic. Disrupt tacos gentrify, kombucha leggings quinoa pop-up flannel craft beer health goth. Brunch health goth dreamcatcher celiac cold-pressed, ugh four loko. Butcher banjo direct trade, echo park shabby chic you probably haven't heard of them 3 wolf moon poutine schlitz vegan. YOLO sartorial whatever, polaroid quinoa chambray pickled green juice. Gentrify everyday carry literally squid. Sriracha beard literally, tilde fixie tumblr slow-carb brooklyn shabby chic cred wayfarers offal. </p> </div> </div> <div class="accordion-item"> <a href="#" class="heading"> <div class="icon"></div> <div class="title">Sriracha pitchfork williamsburg cliche?</div> </a> <div class="content"> <p> Kale chips knausgaard skateboard vice, normcore disrupt bitters fanny pack. Gochujang cliche kale chips, vice ramps semiotics distillery. Organic lumbersexual ugh yr literally actually. Occupy master cleanse iPhone, microdosing literally pickled cronut waistcoat. Pug VHS 90's asymmetrical meh swag humblebrag, you probably haven't heard of them everyday carry pinterest chicharrones ugh. Keytar intelligentsia trust fund, tumblr roof party single-origin coffee ramps. Everyday carry messenger bag pabst, pug mlkshk stumptown polaroid flexitarian helvetica celiac seitan. </p> </div> </div> <div class="accordion-item"> <a href="#" class="heading"> <div class="icon"></div> <div class="title">Truffaut lomo pug jean shorts tote bag?</div> </a> <div class="content"> <p> Vice kale chips selvage umami, chicharrones intelligentsia post-ironic cornhole slow-carb hammock retro synth PBR&amp;B. Small batch waistcoat helvetica, gastropub disrupt man braid fap everyday carry hashtag tumblr you probably haven't heard of them schlitz knausgaard. Cronut blog narwhal pop-up tilde. Scenester PBR&amp;B microdosing, twee bespoke authentic swag banh mi sartorial fashion axe neutra brooklyn cornhole. Pickled brunch chartreuse, ugh everyday carry drinking vinegar cray street art chillwave church-key cornhole tilde biodiesel keffiyeh. Disrupt venmo crucifix, listicle locavore cardigan readymade. Pabst shoreditch scenester mlkshk art party franzen, photo booth occupy lomo bushwick bitters williamsburg synth hella wayfarers. </p> </div> </div> <div class="accordion-item"> <a href="#" class="heading"> <div class="icon"></div> <div class="title">Banjo mustache organic quinoa?</div> </a> <div class="content"> <p> Craft beer paleo man bun tumblr, migas church-key synth locavore kickstarter post-ironic shabby chic. Microdosing migas portland, literally VHS normcore kickstarter sustainable single-origin coffee occupy cardigan. Viral venmo lomo, craft beer distillery kickstarter messenger bag fashion axe keffiyeh tofu celiac sustainable health goth deep v. Bushwick sustainable raw denim kale chips. Intelligentsia migas craft beer listicle, affogato messenger bag kitsch truffaut artisan irony scenester sartorial vice ennui hoodie. Man bun blog cronut, truffaut celiac kogi photo booth quinoa direct trade normcore iPhone. Disrupt synth chartreuse, actually lumbersexual schlitz health goth ennui skateboard gochujang kinfolk trust fund farm-to-table. </p> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Accordion Concept - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
*,
*:before,
*:after { box-sizing: border-box;
}
html { background-color: #eeeeee;
}
html { padding-top: 50px; font-family: 'Raleway', Helvetica, arial, sans-serif; background-color: #eeeeee;
}
.header { text-align: center;
}
.header a { text-decoration: none; color: #bcacb8;
}
.accordion { width: 100%; max-width: 75rem; margin: 0 auto; padding: 2rem;
}
.accordion-item { position: relative;
}
.accordion-item.active .heading { color: #cdc1ca;
}
.accordion-item.active .icon { background: #fefefe;
}
.accordion-item.active .icon:before { background: #cdc1ca;
}
.accordion-item.active .icon:after { width: 0;
}
.accordion-item .heading { display: block; text-transform: uppercase; text-decoration: none; color: #8d818a; font-weight: 700; font-size: 1rem; position: relative; padding: 1.5rem 0 1.5rem 4rem; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
@media (min-width: 40rem) { .accordion-item .heading { font-size: 1.2rem; }
}
.accordion-item .heading:hover { color: #cdc1ca;
}
.accordion-item .heading:hover .icon:before, .accordion-item .heading:hover .icon:after { background: #cdc1ca;
}
.accordion-item .icon { display: block; position: absolute; top: 50%; left: 0; width: 3rem; height: 3rem; border: 2px solid #fefefe; border-radius: 3px; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.accordion-item .icon:before, .accordion-item .icon:after { content: ''; width: 1.25rem; height: 0.25rem; background: #8d818a; position: absolute; border-radius: 3px; left: 50%; top: 50%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.accordion-item .icon:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); z-index: -1;
}
.accordion-item .content { display: none;
}
.accordion-item .content p { margin-top: 0;
}
@media (min-width: 40rem) { .accordion-item .content { line-height: 1.75; }
}

Simple Accordion Concept - Script Codes JS Codes

$('.accordion-item .heading').on('click', function(e) { e.preventDefault(); // Add the correct active class if($(this).closest('.accordion-item').hasClass('active')) { // Remove active classes $('.accordion-item').removeClass('active'); } else { // Remove active classes $('.accordion-item').removeClass('active'); // Add the active class $(this).closest('.accordion-item').addClass('active'); } // Show the content var $content = $(this).next(); $content.slideToggle(100); $('.accordion-item .content').not($content).slideUp('fast');
});
Simple Accordion Concept - Script Codes
Simple Accordion Concept - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 4
Size 4,955 Kb
Views 6,072
Do you need developer help for Simple Accordion Concept?

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!

Kyle Brumm (kjbrum) Script Codes
Name
SVG Hover Animations
3D Parallax Boxes
_toolbox.scss
Simple Tabs Concept
Button Hover Effects
Vue.js Lazy Loading
Dotted Menu Concept
3D Orbiting Split Images
Line Button Hover Effects
Reactive Dot Grid - Canvas
Create amazing love letters 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!