Hire us to design your site.
Dec
1
2012

Make a nice faq page for vldpersonals

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’)”><sub><img title=”Expand / Collapse”
src=”/templates/nightluv/media/expand.png” alt=””></sub>&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’)”><sub><img title=”Expand / Collapse”
src=”/templates/nightluv/media/expand.png” alt=””></sub>&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.

VldMods

About the Author: gugu

Hey ... I´m the owner of this site ;) If you need help customize your vldpersonals site. Please ask me and I will try to help you. Enjoy reading !

2 Comments + Add Comment

  • Gugu thank you a lot for all your tutorials, they are very useful !
    As soon as I have time I will try to install this FAQ !

    Like or Dislike: Thumb up 3 Thumb down 0

    • VldMods

      glad you like it …

      Like or Dislike: Thumb up 3 Thumb down 1

Clients Testimonials

Peter
Thanks for your help and a great support my site works fine now ... no matter how often I had ask for your support you have kindly answered all of my questions ... I recommend you. I vote 5 stars for you. 5 of 5 stars

Peter

About VldMods

Welcome to vldMods here we will try to connect all free and pay mods for vldpersonals 2.5.3 and newer.

You can now translate VldMods in 50 different languages.

Translate a post then you Continue Reading »

Add your vldpersonals site here.

Sponsor/Donate to VldMods

I hope you like VldMods if you sponsor me I can make it even better ;) Thanks.

Find Us On Facebook

VldMods Newsletter

Subscribe to VldMods Newsletter a confirmation email will be sent to you!
This is a good way to be informed about our tutorials and news.

VldMods Polls

Should We Have Php Tutorials For Beginners?