Simple jQuery Accordion Example

Developer
JR Jenkins
Size
3,104 Kb
Views
52,624
  1. Simple jQuery Accordion Example Previews
  2. Simple jQuery Accordion Example HTML Codes
  3. Simple jQuery Accordion Example CSS Codes
  4. Simple jQuery Accordion Example JS Codes

How do I make an simple jquery accordion example?

Just to help me remember how exactly additional options work. What is a simple jquery accordion example? How do you make a simple jquery accordion example? This script and codes were developed by JR Jenkins on 04 October 2022, Tuesday.

Simple jQuery Accordion Example Previews
IQ Test

Simple jQuery Accordion Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple jQuery Accordion Example</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head><title>Hello</title></head> <body> <div id="accordion"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id tincidunt augue, vel porttitor dui. Ut pellentesque, justo ac vulputate volutpat, ipsum lorem ultrices neque, suscipit facilisis ipsum sem vel est. Nam aliquet porttitor dolor eu luctus. Etiam eleifend, augue sit amet consectetur egestas, nulla augue convallis mi, non elementum massa neque at neque. Ut blandit metus at ante auctor faucibus. Nunc fermentum nec leo vel congue. Nullam bibendum bibendum ornare. Integer magna est, semper in turpis at, sagittis scelerisque orci. Vivamus fermentum et odio sit amet pretium.
</p> <h1>Proin sit amet dapibus orci, sed adipiscing nunc.</h1> <p>Proin sit amet dapibus orci, sed adipiscing nunc. Pellentesque vel augue tortor. Integer consequat arcu quis aliquam eleifend. In tempor turpis ac nisl convallis interdum. Nullam quam ipsum, gravida at tincidunt eget, adipiscing eu nunc. Curabitur vel nisl porttitor, dignissim diam id, sollicitudin mi. Integer congue elit id purus laoreet, sed pellentesque tellus feugiat. Mauris nunc est, aliquam quis quam eget, porttitor pretium massa. Vivamus pretium blandit odio. Donec hendrerit, lectus vitae lacinia consectetur, diam lorem rutrum diam, sed iaculis libero arcu ac sem. Etiam ultrices molestie consequat. Aliquam sed lectus lorem. Maecenas pharetra sed eros vel pharetra. Cras nec nisl quis felis lacinia porta id sed metus. Vestibulum adipiscing justo a sollicitudin condimentum.</p> <h1>Sed pellentesque nisi ac orci dapibus, id aliquet lacus eleifend.</h1> <p>Sed pellentesque nisi ac orci dapibus, id aliquet lacus eleifend. Donec id nunc nec massa scelerisque facilisis. Suspendisse potenti. Maecenas ut elementum nunc. Sed vulputate sem ut auctor vehicula. Suspendisse interdum vehicula nisi nec aliquam. Praesent vehicula congue velit sit amet pharetra. Integer elementum et odio sed consectetur. Proin blandit dictum placerat. In et neque lacus. In tempus suscipit justo eget tristique. Nulla fermentum neque pharetra est volutpat commodo. Maecenas placerat libero molestie, bibendum eros vitae, tincidunt dui.</p> <h1>Maecenas sed convallis nibh. Ut scelerisque eleifend tortor.</h1> <p>Maecenas sed convallis nibh. Ut scelerisque eleifend tortor. Sed imperdiet euismod pulvinar. In eu gravida augue. Maecenas nec accumsan diam, tristique adipiscing augue. Sed interdum sollicitudin porta. Vivamus lobortis ipsum ut velit hendrerit feugiat. Phasellus dictum sagittis purus, nec tristique justo. Mauris libero ante, tempor a auctor vitae, commodo nec augue.</p> </div> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple jQuery Accordion Example - Script Codes CSS Codes

h1 {margin-left: 0px;padding-left: 25px !important;}
p {margin-left: 15px;}

Simple jQuery Accordion Example - Script Codes JS Codes

$(document).ready(function () { jQuery("#accordion").accordion({ collapsible: true, active:false, activate: function (event, ui) { // This is a call back that is called when the // animation event ends. Could be tweaked // to only fire when an "open" event is detected // but I am lazy. // I use this in order to force it to resize // the expanded panel since I noticed // that if your expanded panel exceeds the height // of the window it might end up with a scroll // bar otherwise. jQuery(".accordion").accordion("resize"); } }); // Here is how to set an option after the accordion has // already been instantiated $( "#accordion" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
});
Simple jQuery Accordion Example - Script Codes
Simple jQuery Accordion Example - Script Codes
Home Page Home
Developer JR Jenkins
Username jrjenk
Uploaded October 04, 2022
Rating 3
Size 3,104 Kb
Views 52,624
Do you need developer help for Simple jQuery Accordion Example?

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!

JR Jenkins (jrjenk) Script Codes
Name
Style Comments
CSS Slide Show
Working around OS X Dynamic Scrollbars
BARcade Project Demo
A Pen by JR Jenkins
Reminder about Geolocation
Konami Code example
UAC Decode Online
COA Color Swatches
Create amazing Facebook ads 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!