How can i make User Help Like This

I want to create help page with HTML for my user like below.

If I click the word, the entire text will show...
I will show the image that i want

1.

2.

any one?
Please Help

Hello!

Please don't double post unless separated by 24 hours. Use the EDIT button.

You can do it with a DHTML code. Do you want to use it in HTML page?

Yes I want to use it in HTML Page.
I want to create the HTML page and I will link it at my nav bar.
Can I?

Anybody Know?

Yes! It's a lot of code/work.
(depending on the number categories & items you want)

You can add collapsible faq mod javascript to your database.

Test-click the "zone3 faq" pop-up link on *this test forum
View the pop-up page source & you'll see how much code it takes.

I can help you with this... are you good with Html/JavaScript?
...operating your admin panel-creating widgets & Html pages?

RoNo wrote:Yes! It's a lot of code/work.
(depending on the number categories & items you want)

You can add collapsible faq mod javascript to your database.

Test-click the "zone3 faq" pop-up link on *this test forum
View the pop-up page source & you'll see how much code it takes.

I can help you with this... are you good with Html/JavaScript?
...operating your admin panel-creating widgets & Html pages?

Ahh Your Forum is cool.

I am happy that you say you will help me.
but I am not good at JavaScript. I can write HTML.
Yes I can operate my AP creating widgets & HTML pages well.

Alright then... can you list the questions and answers for your help page?
tnx glad you like the test forum. What language is on your forum?

OK I will show you the list of questions but I can't list the answer because I am from Myanmar and even I show you the answer, I think your can't see the original font.
So I will show you the questions. Is it OK?
for the answer please tell me where to add it at the code.

I will write down the question after 2 hours later.
Now, I am too hungry

thanks for your help.

I want to make as your faq. most of the questions are yours and I will translate it to our language when we finished the coding.

Code:


Login and Registration Issues
    Why do I need to register at all?
    How To Register?
    I registered but cannot log in!
    Why can't I log in?
    I've lost my password!
    How do I prevent my username from appearing in the online user listings?

User Preferences and settings
    How do I change my signature?
    How do I change my avatar?
    How do I manage my Friends?

Formatting and Topic Types
    What is BBCode?
    Can I use HTML?
    Can I post Images?
    What are Announcements?
    What are Sticky topics?
    What are Locked topics?

Posting Issues
    How do I post a topic in a forum?
    How do I Reply a topic?
    How do I edit or delete a post?
    How do I create a poll?
    How do I edit or delete a poll?
    Why can't I access a forum?
    Why can't I vote in polls?
    How do I thank someone post?
    How do I add Images inside the post?

Private Messaging & Visitors Message
    How do I send PM?
    I cannot send private messages!
    I keep getting unwanted private messages!
    I have received a spamming or abusive email from someone on this board!
    How do I write Visitors Message?

Thanks for your help friend.

1st Create an Html page titled: collapsible_faq_js with this

Code:

function _CFAQ()
{
   this.lastOpened = '';
   return this;
}
_CFAQ.prototype.IsDisplaySupported = function()
{
   if( window.opera && !document.childNodes ) return false;
   if( document.getElementById || document.all ) return true;
   return false;
}
_CFAQ.prototype.getQueryVar = function(varName)
{
   var q = window.location.search.substring(1);
   var v = q.split('&');
   for( var i=0; i < v.length; i++ )
   {
      var p = v[i].split('=');
      if( p[0] == varName ) return p[1];
   }
   return null;
}
_CFAQ.prototype.getObj = function(obj)
{
   return ( document.getElementById ? document.getElementById(obj) : ( document.all ? document.all[obj] : null ) );
}
_CFAQ.prototype.displayObj = function(obj, status)
{
   var x = this.getObj(obj);
   if( x && x.style ) x.style.display = status;
}
_CFAQ.prototype.display = function(faq_id, isLink)
{
   if( this.IsDisplaySupported() )
   {
      if( !isLink )
      {
         if( this.lastOpened != '' )
         {
            this.displayObj(this.lastOpened, 'none');
         }
         if( this.lastOpened != faq_id )
         {
            this.displayObj(faq_id, '');
            this.lastOpened = faq_id;
         }
         else
         {
            this.lastOpened = '';
         }
      }
      return false;
   }
   return true;
}

var CFAQ = new _CFAQ();

if( !CFAQ.IsDisplaySupported() )
{
   var u_faq = window.location.href;
   u_faq += ( u_faq.indexOf('?') > 0 ? '&' : '?' ) + 'dhtml=no';
   window.location.replace(u_faq);
}
/*************************************************************
*   DHTML Collapsible FAQ MOD v1.0.0
*
*   Copyright (C) 2004, Markus (http://www.phpmix.com)
*   This script is released under GPL License.
*   Feel free to use this script (or part of it) wherever you need
*   it ...but please, give credit to original author. Thank you. :-)
*   We will also appreciate any links you could give us.
*
*   Enjoy! ;-)
*************************************************************/

Done Sir.

Done again Sir.

Now... create your Faq/Help Html page
How is it going to look? Do you have a background image?
Are you going to use your forum header and footer?
What colors do you want for background, text & links?

Take what you need from my test forum faq page layout: (edit your info)

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ZONE3 FAQ</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="author" content="RoNo">
<meta name="description" content="ZONE3 FAQ"></head>

<style type="text/css">
body{ background-image:url('BACKGROUND IMAGE.jpg');
background-attachment:fixed; top:0; left:0; width:98%; height:100%; }
</style>

<body text="#FFFFFF" link="lime" vlink="yellow" alink="red">
<link rel="shortcut icon" href="YOUR FAVICON.png">

<center>
<table width="80%" style="background-color: #; border: #CCCCCC; border-style: solid; border-width: 0px; margin-left: 150px; margin-top: 5px; padding: 8px;"><tr><td>

<script src="YOUR SITE/collapsible_faq_js HERE.htm" type="text/javascript"></script>


[[[[[[ Your Faq content will go here ]]]]]] (remove brackets)


<br><br>

</td></tr><table>

</body>
</html>

Be sure to add your new page Url to "script src" for this mod to work.
The Faq content is too long to post on this forum. Get it *here.

woo huu huuu
I have done my draft FAQ now.
Thanks you so much RoNo.
Here is my page.
http://www.myanmaritresource.info/Myanmar-IT-Resource-FAQ-h1.htm

In the future I will add the frame inside the page.

Great Job Rono.
SYKO, i personally appreciate you giving the credits to RoNo on that html page.
Since this thread appears to be solved, I will lock this thread and mark it as solved.


Sanket