# Survey form-Problem

**URL:** <https://forum.freecodecamp.org/t/survey-form-problem/268970>\
**Category:** I Built This\
**Created:** [April 3, 2019, 9:04am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970 "2019-04-03T09:04:31Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jameslw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jameslw/32/113314_2.png) [@jameslw](https://forum.freecodecamp.org/u/jameslw)\
**Post date:** [April 3, 2019, 9:04am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/1 "2019-04-03T09:04:31Z")

</div>

With the survey form I am trying to show divs through the use of checkboxes. I have no problem if I treat each box separately but if I try to use a single function for it, it does not work.  
Here is a link to my project:[https://codepen.io/jameslwor/pen/qwEOyr?editors=1010](https://codepen.io/jameslwor/pen/qwEOyr?editors=1010).  
I know the layout is very very bad but I first want to work on the functionality of the page before working on the layout.

---

<div class="post-metadata">

**Author:** ![Cirediallo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cirediallo/32/57208_2.png) [@Cirediallo](https://forum.freecodecamp.org/u/Cirediallo)\
**Post date:** [April 3, 2019, 10:26am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/2 "2019-04-03T10:26:18Z")

</div>

I don’t know if I really understand what you mean. Let me explain you want to display elements according to the selected checkbox right ? If it’s I think the first thing that you have to use is not checkbox it’s radio button cause you can select more than one type of checkbox but for radio you just cant select one at the same time.

---

<div class="post-metadata">

**Author:** ![jameslw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jameslw/32/113314_2.png) [@jameslw](https://forum.freecodecamp.org/u/jameslw)\
**Post date:** [April 3, 2019, 10:32am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/3 "2019-04-03T10:32:41Z")

</div>

I have multiple lists and want to show as many lists as checkboxes are checked

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [April 3, 2019, 1:08pm UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/4 "2019-04-03T13:08:39Z")

</div>

Hi @jameslw, codepen provides validators for HTML, CSS and JS. Click on the arrow in the upper right in each section and then click on the ‘Analyze’ link. You have some spelling errors in HTML that effect your form.

---

<div class="post-metadata">

**Author:** ![jameslw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jameslw/32/113314_2.png) [@jameslw](https://forum.freecodecamp.org/u/jameslw)\
**Post date:** [April 4, 2019, 7:02am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/5 "2019-04-04T07:02:49Z")

</div>

At the moment I am only in need of help regarding the question I asked at the start of this post

---

<div class="post-metadata">

**Author:** ![jameslw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jameslw/32/113314_2.png) [@jameslw](https://forum.freecodecamp.org/u/jameslw)\
**Post date:** [April 4, 2019, 7:29am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/6 "2019-04-04T07:29:15Z")

</div>

I get the following when I do as you suggest:

- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- The BEM element ‘Action-Adventure’ must be a descendent of ‘Action’.
- The \<lable\> element is not a valid HTML element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- The \<lable\> element is not a valid HTML element.
- The BEM element ‘Role-playing’ must be a descendent of ‘Role’.
- The \<lable\> element is not a valid HTML element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- ‘\<’ is not a valid attribute of the \<input\> element.
- ‘li’ is not a valid attribute of the \<input\> element.
- The \<lable\> element is not a valid HTML element.
- The \<lable\> element is not a valid HTML element.

---

<div class="post-metadata">

**Author:** ![adb2396](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adb2396/32/112968_2.png) [@adb2396](https://forum.freecodecamp.org/u/adb2396)\
**Post date:** [April 4, 2019, 9:02am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/7 "2019-04-04T09:02:50Z")

</div>

**Spell Check:** lable =\> label

You forgot to close input tag some places.

CSS “id selector” is specifically used for identifying the element uniquely. For selecting any element more than once try to use the “class selector”.

Check: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

---

<div class="post-metadata">

**Author:** ![jameslw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jameslw/32/113314_2.png) [@jameslw](https://forum.freecodecamp.org/u/jameslw)\
**Post date:** [April 4, 2019, 10:15am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/8 "2019-04-04T10:15:48Z")

</div>

Thanks for the feedback.  
But none of this answers what I asked for help with.  
Here is link to the one I am currently working on:[https://codepen.io/jameslwor/pen/dLYmWP](https://codepen.io/jameslwor/pen/dLYmWP)

---

<div class="post-metadata">

**Author:** ![jameslw](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jameslw/32/113314_2.png) [@jameslw](https://forum.freecodecamp.org/u/jameslw)\
**Post date:** [April 25, 2019, 10:35am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/9 "2019-04-25T10:35:25Z")

</div>

thank you to everyone who tried to answer the question

---

<div class="post-metadata">

**Author:** ![brandon\_wallace](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/brandon_wallace/32/198757_2.png) [@brandon\_wallace](https://forum.freecodecamp.org/u/brandon_wallace)\
**Post date:** [April 26, 2019, 1:59am UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/10 "2019-04-26T01:59:16Z")

</div>

@jameslw

Try this:

1. You can use a button to toggle the divs open and close. It would be way easier.
2. Since you are using Jquery you can just use the toggle function to show and hide the div.

```auto
$('#action-button').on('click', () => {
    $('.show').slideToggle(500);
});

```

1. Add display: block to the input elements to quickly format the page better like this:

```auto
input[type=" email"],
input[type="text"],
input[type="password"] {
  display: block;
  margin-bottom: 1rem;
}

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 6, 2021, 1:38pm UTC](https://forum.freecodecamp.org/t/survey-form-problem/268970/11 "2021-02-06T13:38:02Z")

</div>

Closed on February 6, 2021, 1:38pm UTC