You certainly can, but you don't actually need to download it. You could just link to it elsewhere on the web, which may lead to faster loading for end users, too. In other words, you can just add this code to your document for it to work:
Code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
A full working example (with no styles) might be something like this:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accordion</title>
</head>
<body>
<div id="accordion">
<h3>Heading 1</h3>
<div class="accordion-content">
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
</div>
<h3>Heading 2</h3>
<div class="accordion-content">
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
</div>
<h3>Heading 3</h3>
<div class="accordion-content">
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
</div>
<h3>Heading 4</h3>
<div class="accordion-content">
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
<p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. </p>
</div>
</div><!-- end accordion div -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</body>
</html>
It's a shame to have to use so much code for an effect like this, but so be it. Your site may find other uses for these libraries anyhow.
Javascript code
Posting Permissions
Reply With Quote
Bookmarks