Multiple show-hide items

@KevinKMJrSep 29.2009

Okay, I am practicly brand new to Javascript, having only coded a few lines by teaching myself.

I am trying to create a question & answer page that will display all questions on the left DIV and all selected answers on the right DIV.

~~[LIST]~~

~~[*]~~

I want all answers to display, as long as the question was selected.

~~[*]~~

I want it to load with no answers visible.

~~[*]~~

If questions 1 & 3 are selected, then I want all answers 1 & 3 to display.

~~[*]~~

If question 3 is unselected, then I want answer 1 remain by itself.

[/LIST]

I have been successful in creating completely seperate sections, where each answer shows directly to the right of the question, but I want the answers to flow independantly filling in each selected anser at the top of the answer DIV.

Yes, I’m over my head on this one, but that’s the best way to learn ?

to post a comment

JavaScript

4 Comments(s) _↴

@JMRKERSep 30.2009 — #Can you provide a sample of the questions/answers you wish to work with?

Perhaps a simple HTML layout of the display you wish to create with the JS.

Can you show what you have created already and how you wish it to be different with JS?

@KevinKMJrauthorSep 30.2009 — #This is the working code that I have so far:

[CODE]
 <head>
 
 <style type="text/css">
 div.disc {float:left;width:48%}
 div.fbb {float:right;width:48%}
 </style>
 
 </head>
 
 <body>
 
 <script language="javascript"> 
 function toggle() {
 var ele = document.getElementById("toggleText");
 var text = document.getElementById("displayText");
 if(ele.style.display == "block") {
 ele.style.display = "none";
 text.innerHTML = "Yes";
 }
 else {
 ele.style.display = "block";
 text.innerHTML = "hide";
 }
 } 
 </script>
 
 <div class="disc" id="disc">
 <h4>Would you like to save money by creating your own cards?<a id="displayText" href="javascript:toggle();">Yes</a></h4>
 </div>
 
 <div class="fbb">
 <div id="toggleText" style="display: none">The Cricut will allow you to create your own greating cards which is cost effective for you because you will never have to purchase another greeting card again!</div>
 </div>
 
 </body>
 [/CODE]

As far as the qestions themselves, it doesn't matter, I can change them later. Using Question x and Answer x works fine for this part. Basically I want the questions to be selected as desired to generate a list of answers on the right.

@nathandelaneOct 01.2009 — #Okay, I am practicly brand new to Javascript, having only coded a few lines by teaching myself.

I am trying to create a question & answer page that will display all questions on the left DIV and all selected answers on the right DIV.

[LIST]

[*]I want all answers to display, as long as the question was selected.

[*]I want it to load with no answers visible.

[*]If questions 1 & 3 are selected, then I want all answers 1 & 3 to display.

[*]If question 3 is unselected, then I want answer 1 remain by itself.

[/LIST]

I have been successful in creating completely seperate sections, where each answer shows directly to the right of the question, but I want the answers to flow independantly filling in each selected anser at the top of the answer DIV.

Yes, I'm over my head on this one, but that's the best way to learn ?[/QUOTE]

It looks like you are trying to create a multiple choice questionaire at first glance, but then when I read more into your list of requirements, I get a little confused, so

[list]

[*]You want all possible answers pertaining to a specific question to display? Is that correct? And what is meant when you say, "when a question is selected", do you mean that a user selects a question from a drop-down list, or clicks on a link?

[*]You want to load the page with the answers hidden? You could do this by applying a CSS style to the div containing all of the answers. Just add display: none to the style.

[*]Now you're saying that you can select multiple questions? How does a user go about selecting multiple questions?

[*]This one confuses me, you say, "if question 3 is unselected, then I want answer 1 remain", but why wouldn't the answer to question number one remain when question number three was unselected?

[/list]

Your example code doesn't help to resolve the issue either, because I can't see any of your requirements in that code. Could you please be more specific about exactly the kind of web page you want to create? Help me lay it out better in my mind.

Thanks.

@KevinKMJrauthorOct 01.2009 — #You'll have to excuse me, termilogy is, by far, a weak point for me. Let me try examples:

[B][U]Load Page[/U][/B]:

[U]Left DIV[/U]
Features:

Feature 1-Y/N

Feature 2-Y/N

Feature 3-Y/N

Feature 4-Y/N[/QUOTE]
[U]Right DIV[/U]
[CODE]Benefits:[/CODE]

Each listed feature should include a link or command that when Y is clicked/selected, the Right DIV starts filling in with the corrasponding Benefits.

[B][U]Features 1, 3, & 4 chosen as Y[/U][/B]

[U]Left DIV[/U]
Features:

Feature 1-Y/N

Feature 2-Y/N

Feature 3-Y/N

Feature 4-Y/N
[/QUOTE]
[U]Right DIV[/U]

[CODE]Benefits:
 Benefit 1
 Benefit 3
 Benefit 4[/CODE]

Also, if they go back and click/select the N option for a feature later, then the corrasponding benefit is removed from visibility.

[B][U]Features 3 changed to N[/U][/B]

[U]Left DIV[/U]
Features:

Feature 1-Y/N

Feature 2-Y/N

Feature 3-Y/N

Feature 4-Y/N
[/QUOTE]
[U]Right DIV[/U]

[CODE]Benefits:
 Benefit 1
 Benefit 4[/CODE]

Does this help illustrate my request any?

Also in #JavaScript _↴

loop help How can I sort an array by how many times a data is in the array?[Solved]WTF? Firefox 3.6.8 problem

Success!

Help @KevinKMJr spread the word by sharing this article on Twitter...

Tweet This

Multiple show-hide items

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Multiple show-hide items

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴