I am creating a web page for frequently asked questions (FAQs) in sharepoint 2010. I would like to create the page as it is below link. I am new to JavaScript. Please guide to do the same.
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:
A full working example (with no styles) might be something like this:
<!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.