How Do I Make A Dropdown List

Question

0.00/5 (No votes)

See more:

I don't think "Dropdown List" is the proper term. I'm working on an FAQ page, and would like to have the list of FAQs, then when you click on one, the answer appears directly below its question.

Example -

FAQ's:

Click on Question 1 and it becomes:

FAQ's:

Question 1 Answer

Click on Question 1 Again and it goes back to normal

Posted 19-Feb-15 13:51pm

Member 11465408

Add a Solution

Comments

[no name] 19-Feb-15 23:26pm

U wanted to bind the selected question answer in another dropdownlist?

Mohibur Rashid 20-Feb-15 1:03am

To achieve this, you will have to write tons of code. A simple forum will not solve your problem You can do this other way. Such as: onchage run some javascript to show the selection list in another view

Simple example would be:

<pre language='javascript'>
<SCRIPT>
function processAndView(value){
//create view for further selection

}
</SCRIPT>
<SELECT >
<OPTION value=1>action 1</OPTION>
<OPTION value=2>action 2</OPTION>
</SELECT>

</pre >

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Santosh K. Tripathi · Answer 1 · 2015-02-19T19:10:00

Hi,
I am giving you some hint. try it and fit this in your solution.

Put you question and answers in div like this

HTML

<div id='div_FAQ_Question_1' class='FAQ_Question' onclick='fnShowHideFAQ(this)'>
    Question 1
</div>
<div id='div_FAQ_Answer_1' class='FAQ_Answer'>
    Anwser 1
</div>
<div id='div_FAQ_Question_2' class='FAQ_Question' onclick='fnShowHideFAQ(this)'>
    Question 2
</div>
<div id='div_FAQ_Answer_2' class='FAQ_Answer'>
    Anwser 2
</div>
<div id='div_FAQ_Question_3' class='FAQ_Question' onclick='fnShowHideFAQ(this)'>
    Question 3
</div>
<div id='div_FAQ_Answer_3' class='FAQ_Answer'>
    Anwser 3
</div>

Use CSS

CSS

.FAQ_Answer
{
    display: none;
}

Finally define js function

JavaScript

function fnShowHideFAQ(obj) {

    var currentQuestionId = obj.id;
    var currentAnswerId = currentQuestionId.replace('Question', 'Answer');
    var currentAnswerStatus = $('#' + currentAnswerId).css('display');

    $('.FAQ_Answer').css('display', 'none');

    if (currentAnswerDisplay == 'none') {
        $('#' + currentAnswerId).css('display', '');
    }
}

js function works like this

1. when you click on a question it gets question id and finds answer id.
2. stores current status of answer (is it hidden or showing).
3. hide all answer.
4. if current answer is not visible, function makes it visible.

Note:- use same css class for all answers, because its hide all elements which has class 'FAQ_Answer'.

Suggestion:- you can use onclick='fnShowHideFAQ(this)' in answer div also. this will hide current answer if you click on current answer.

All the best