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,107
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,107
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •