WIP accordion without jQueryUI

Developer
Laura Moraiti
Size
2,724 Kb
Views
20,240
  1. WIP accordion without jQueryUI Previews
  2. WIP accordion without jQueryUI HTML Codes
  3. WIP accordion without jQueryUI CSS Codes
  4. WIP accordion without jQueryUI JS Codes

How do I make an wip accordion without jqueryui?

Adaptable to more than one situation, slideToggle for animation and an active class. Currently WIP, bettering the animation when changing from one tab to another. What is a wip accordion without jqueryui? How do you make a wip accordion without jqueryui? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

WIP accordion without jQueryUI Previews
IQ Test

WIP accordion without jQueryUI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WIP accordion without jQueryUI</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> <ul> <li class="show"> <h2 class="accordion-handle">Click on me</h2> <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, enim, a, placeat reiciendis incidunt repellat nulla ipsa eligendi minima aperiam nesciunt suscipit id nihil voluptate culpa dignissimos reprehenderit perferendis quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, enim, a, placeat reiciendis incidunt repellat nulla ipsa eligendi minima aperiam nesciunt suscipit id nihil voluptate culpa dignissimos reprehenderit perferendis quos.</div> </li> <li> <h2 class="accordion-handle">Or click me</h2> <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, enim, a, placeat reiciendis incidunt repellat nulla ipsa eligendi minima aperiam nesciunt suscipit id nihil voluptate culpa dignissimos reprehenderit perferendis quos.</div> </li> <li> <h2 class="accordion-handle">Or me</h2> <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WIP accordion without jQueryUI - Script Codes CSS Codes

ul { margin: 0; padding: 0; list-style: none;
}
ul .accordion-handle { background-color: #00BFFF; color: #FFF; border-top: 1px solid rgba(0, 0, 0, 0.1); cursor: hand; cursor: pointer; font-weight: 300; font-size: 1.1em; padding: 1em; margin: 0;
}
ul .accordion-handle:after { content: "\25BC"; float: right; color: rgba(255, 255, 255, 0.3);
}
ul .container { display: none; padding: 1em; overflow: hidden; background-color: #eee;
}
ul .show { background-color: #f5f5f5;
}
ul .show .accordion-handle:after { content: "\25B2"; float: right; color: rgba(255, 255, 255, 0.3);
}
ul .show .container { display: block;
}

WIP accordion without jQueryUI - Script Codes JS Codes

function accordion(handle) { $(handle).on('click', function(){ var open = $(this).next(); open.slideDown(400); $(this).parent('li') .addClass('active'); $(handle).next() .not(open) .slideUp(400) .parent('li') .removeClass('active'); });
}
accordion('.accordion-handle');
WIP accordion without jQueryUI - Script Codes
WIP accordion without jQueryUI - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 2,724 Kb
Views 20,240
Do you need developer help for WIP accordion without jQueryUI?

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!

Laura Moraiti (Fixie) Script Codes
Name
Responsive and friendly table
Reusable simple dropdown
Easy hover effect for videos
Fluid section title with border on both sides
A Pen by Laura Moraiti
Two column of responsive height
Horizontal infinite loop newsticker
Dynamic prefix, transition and transform SASS mixins
Striped background for a container with more than one element
Fun responsive split layout
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!