Javascript code

JavaScript
1

Hello everyone,

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.

http://www.phfi.org/resources

I would be grateful if you could help me out.
Thanks
Arjun

2

Hi arjunabhi4. Welcome to the forums.

That page is using a “jQuery accordion” script. There are lots of them out there, including this, from the official jQuery site:

Click the “view source” link to see what code you need to add to your page to make it work. :slight_smile:

3

Dear Ralph,

Thank a lot for your swift reply. should I download and link jquery-1.9.1.js & jquery-ui 1.10.2 to sharepoint custom script.

Best regards
Arjun

4

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:


<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:

<!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.