Using JQuery to hide multiple divs

Question

I'm writing a web app that gives you 2 template options on create.php

In template 1, you have the follwing in put options

<input type="file" name="image1" id="image1" required />

<input type="file" name="image2" id="image2" required />

In template 2, the user has 3 extra input options.

However, I don't want these 3 extra inputs to show for anyone using template 1.

Therefore I decided that I would surround the inputs with <div id="template2"> so that I can just use

$('#template2').hide() to remove the extra 3 inputs inputs. See below

<input type="file" name="image1" id="image1" required /> <input type="file" name="image2" id="image2" required />

<div id="template2"><input type="file" name="image3" id="image3" required /><div>

<div id="template2"><input type="file" name="image4" id="image4" required /><div>

<div id="template2"><input type="file" name="image5" id="image5" required /><div>

The problem Is that this hide is only removing one of the template 2 divs, but the others are remaining.

I also tried looping $('#template2').hide() three times, but that didn't solve the issue either.

So I'm kind of out of ideas at this point...

ID's cannot be used more than once. jQuery will find the first instance, `hide()` it, and end processing. You can do `$('div').hide();` to hide all `
`'s. Do `class="template2"` and then you can target using `$('.template2').hide();` — MonkeyZeus, Dec 09 '13 at 16:04
IDs **must** be unique. You may want to use classes instead. — j08691, Dec 09 '13 at 16:04
possible duplicate of [jquery select divs with same id](http://stackoverflow.com/questions/902839/jquery-select-divs-with-same-id) — MonkeyZeus, Dec 09 '13 at 16:09
I did not downvote but the overall goal of StackOverflow is to prevent/reduce redundancy. I understand that sometimes it's nice to just get a second pair of eyes on your issue but the root simplicity of knowing that IDs can only be used once is probably what attracted the downvotes. — MonkeyZeus, Dec 09 '13 at 16:28
@MonkeyZeus. I understand, I guess my problem was that it wasn't as simple to me. It seems that many people here think that everyone else should be as smart/knowledgeable as them. — A K, Dec 09 '13 at 16:44
I follow you but don't let it get you down. Certainly ask questions when you are stuck but just make sure you've done enough research before-hand to not get caught with your pants down. — MonkeyZeus, Dec 09 '13 at 17:07

score 1 · Answer 1 · answered Dec 09 '13 at 16:08

you have to use classes for that.... you can't have ids with the same name

  $('.template2').hide();


 <div class="template2"><input type="file" name="image3" id="image3" required /><div>
 <div class="template2"><input type="file" name="image4" id="image4" required /><div>
 <div class="template2"><input type="file" name="image5" id="image5" required /><div>

or still if you want to user id wrap the div in one:

 $('#template2').hide();

 <div id="template2">
    <input type="file" name="image3" id="image3" required />
    <input type="file" name="image4" id="image4" required />
    <input type="file" name="image5" id="image5" required />
 </div>

aksu · Accepted Answer · 2013-12-09T16:15:43.313

0

Ids are unique, you can only use them to identify elements. To select multiple elements, you should use class attribute. Like this:

HTML:

<div class="template2"><input type="file" name="image3" id="image3" required /><div>

<div class="template2"><input type="file" name="image4" id="image4" required /><div>

<div class="template2"><input type="file" name="image5" id="image5" required /><div>

jQuery:

$('.template2').hide();

Dot (.) in jquery selector is class operator.

edited Dec 09 '13 at 16:15

answered Dec 09 '13 at 16:08

aksu

5,221
5
24
39

I see how it works now. Thank you very much. I have another issue now, where even that the input is hidden it's stil technically there. What I mean is, if I have this input hidden. The check_Image(); function will still expect me to put an image into the hidden div. Is there a workaround for that? – A K Dec 09 '13 at 16:09
will do, when system allows. – A K Dec 09 '13 at 16:11
you can remove from #fimage the required and add it when template2 is clicked like this $('#fimage').prop('required',true); – Aliceiw Dec 09 '13 at 16:13
I don't understand why should i do that @Sakuya84. – aksu Dec 09 '13 at 16:17
because if i have understood well your hidden input is required for template2 and not for template1, and if you select template1 you cant send the form because fimage is required, so to avoid this problem you just have to make it required when template2 is required by doing so your form will be sent correctly in both cases. if instead i understood wrong please explain the problem in a more detailed way :D – Aliceiw Dec 09 '13 at 16:22
@Sakuya84. No, you're absolutely right. The other thing I have is the check_image() JS function, which I also have to disable when that happens. – A K Dec 09 '13 at 16:49
i would implement the check in this way http://jsfiddle.net/sn9tq/ basically i will save the number of the template chosen, then on fimage change, i will just check if the number is equivalent (in the example is 2) ^^ – Aliceiw Dec 09 '13 at 17:06

score 0 · Answer 3 · answered Dec 09 '13 at 16:15

0

You can use class to access all of the input types. You may not need to add extra divs. Just add class to input types.

$(".toHide").hide();

see the fiddle

http://jsfiddle.net/9qn5v/

answered Dec 09 '13 at 16:15

Shahzeb Khan

3,582
8
45
79

Using JQuery to hide multiple divs

3 Answers3