SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Javascript code

  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript code

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

    http://jqueryui.com/accordion/

    Click the "view source" link to see what code you need to add to your page to make it work.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •