Make a nice faq page for vldpersonals

An article by VldMods    2 Comments

Okey today I will learn how to make a nice faq page for vldpersonals. (jquery)

it is a expanding collapsing  faq page … next time it is with accordion instead !
(I will make better one later then I have time for it, with the most important question/answers for your site !

(here is a few images how the faq page will be then it is finished …)

1.

2.

3.

Now … how we can get it to work !

we need:

expand.js (upload  it to /includes/js/
expand.png (upload it to your templates media folder …in my case it was nightluv)
faq.txt (insert this text in your new faq page)

download the files here …

Insert this code in your faq page (use the html button so the html code is working)

<script src="/includes/js/expand.js"></script>
<p><span style="font-size: 20px; font-weight: bold;"><span style="color: #436082;">Frequently Asked Questions</span></span></p>
<div>

<hr>
    <h2 style="cursor: pointer;" onclick="openClose('a1')"><sub><img title="Expand / Collapse"
	src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
	<strong>Questions About Us</strong></span></h2>

    <div id="a1" class="texter">
        <li>
            <div style="cursor: pointer;" onclick="openClose('a1-1')"><sub><img title="Expand / Collapse"
			src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
			<strong>Question 1</strong></span></div>

            <div id="a1-1" class="texter">
                <blockquote>
                    <blockquote>
                        <p>Answer 1 here</p>
                    </blockquote>
                </blockquote>
            </div>
        </li>
        <li>
            <div style="cursor: pointer;" onclick="openClose('a1-2')"><sub><img title="Expand / Collapse"
			src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
			<strong>Question 2</strong></span></div>

            <div id="a1-2" class="texter">
                <blockquote>
                    <blockquote>
                        <p>Answer 2 here</p>
                    </blockquote>
                </blockquote>
            </div>
        </li>
        <li>
            <div style="cursor: pointer;" onclick="openClose('a1-3')"><sub><img title="Expand / Collapse"
			src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
			<strong>Question 3</strong></span></div>

            <div id="a1-3" class="texter">
                <blockquote>
                    <blockquote>
                        <p>Answer 3 here</p>
                    </blockquote>
                </blockquote>
            </div>
        </li>
</div>

<hr>
    <h2 style="cursor: pointer;" onclick="openClose('a2')"><sub><img title="Expand / Collapse"
	src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
	<strong>Question About Memberships</strong></span></h2>

    <div id="a2" class="texter">
        <li>
            <div style="cursor: pointer;" onclick="openClose('a2-1')"><sub><img title="Expand / Collapse"
			src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
			<strong>Question 1</span></strong></span></div>

            <div id="a2-1" class="texter">
                <blockquote>
                    <blockquote>
                        <p>Answer 1 here</p>
					</blockquote>
                </blockquote>
            </div>
        </li>
        <li>
            <div style="cursor: pointer;" onclick="openClose('a2-2')"><sub><img title="Expand / Collapse"
			src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
			<strong>Question 2</strong></span></div>

            <div id="a2-2" class="texter">
                <blockquote>
                    <blockquote>
                        <p>Answer 2 here</p>
                    </blockquote>
                </blockquote>
            </div>
        </li>
        <li>
            <div style="cursor: pointer;" onclick="openClose('a2-3')"><sub><img title="Expand / Collapse"
			src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
			<strong>Question 3</strong></span></div>

            <div id="a2-3" class="texter">
                <blockquote>
                    <blockquote>
                        <p>Answer 3 here</p>
                    </blockquote>
                </blockquote>
            </div>
        </li>

    </div>
</div>
    <hr>	

    <h2 style="cursor: pointer;" onclick="openClose('a3')"><sub><img title="Expand / Collapse"
	src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082">
	<strong>Question Profile Settings</strong></span></h2>

<div id="a3" class="texter">
    <li>
        <div style="cursor: pointer;" onclick="openClose('a3-1')"><sub><img title="Expand / Collapse"
		src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
		<strong>Question 1</strong></span></div>

        <div id="a3-1" class="texter">
            <blockquote>
                <blockquote>
                    <p>Answer 1 here</p>
                </blockquote>
            </blockquote>
        </div>
    </li>
    <li>
        <div style="cursor: pointer;" onclick="openClose('a3-2')"><sub><img title="Expand / Collapse"
		src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
		<strong>Question 2</strong></span></div>

        <div id="a3-2" class="texter">
            <blockquote>
                <blockquote>
                    <p>Answer 2 here</p>
				</blockquote>
			</blockquote>
        </div>
      </li>
		<li>
        <div style="cursor: pointer;" onclick="openClose('a3-3')"><sub><img title="Expand / Collapse"
		src="/templates/nightluv/media/expand.png" alt=""></sub>  <span style="color: #436082;">
		<strong>Question 3</strong></span></div>

        <div id="a3-3" class="texter">
            <blockquote>
                <blockquote>
                    <p>Answer 3 here</p>
                </blockquote>
            </blockquote>
        </div>
</div>
<hr>        

<blockquote>
    <p>If you cannot find the answer here, please <a href="/contactus/" title="Contact Us" target="">Contact
        Us</a>.</p>
</blockquote>

Make a new custom page (faq page) you must make it in your controlpanel:
( and use the html button ! )( In the right corner is the html button )
( this printscreen show how it is looking then you have save it …)

Now … I will explain how it work !
( it is optional to read this ! )(this is only if you need to know how the code inside it are working)

<h2 style=”cursor: pointer;” onclick=”openClose(‘a1’)”>_{<img title=”Expand / Collapse”
src=”/templates/nightluv/media/expand.png” alt=””>}&nbsp;&nbsp;<span style=”color: #436082;”>
<strong>Questions About Us</strong></span></h2>

<div id=”a1″>
<li>
<div style=”cursor: pointer;” onclick=”openClose(‘a1-1’)”>_{<img title=”Expand / Collapse”
src=”/templates/nightluv/media/expand.png” alt=””>}&nbsp;&nbsp;<span style=”color: #436082;”>
<strong>Question 1</strong></span></div>

<div id=”a1-1″>
<blockquote>
<blockquote>
<p>Answer 1 here</p>
</blockquote>
</blockquote>
</div>
</li>

If you need more question and answers ?
if you look at the code for category  a1
all questions and answers in this category is named
a1-1
a1-2
a1-3

if you need more insert

a1 -4
a1-5
a1-6

and now you have 6 question and answers …
(your choice how many you need for each category)

in this example we have only 3 categories …
(you can make how many you need … name it a1 a2 a3 a4 a5 a6 and etc …)

Then you need to edit it and make new questions and answers don´t use the html button.
(use the standard editor view and all will be fine)

Hope you like the tutorial if you need help please comment it and I will try to help you.