CODEWITHSUNDEEP
jquery
user1176783
user1176783

Reputation: 673

Hide all fields in a particurlar section/fieldset

I am working on a larger project and came up with an idea, that I can't seem to get working using jquery. Client has web form. A dropdown field is on the form, that will make certain sections/fieidset display and disappear upon selection. I got that going, but then the client wants to have certain fields within those sections display or not based on the type selected from the dropdown.

My idea - I want to hide all the fields within a section is there a way to say hide everything in this section except.

so for example:

<fieldset name="Group1" id="sectionOne">
                <legend>Section 1</legend>
                <input id="txt_123" type="text" />
                <input id="txt_124" type="text" />
                <input id="txt_125" type="text" />
                <input id="txt_125" type="text" />
                <input id="txt_126" type="text" />
            </fieldset>
</body>

if i want to say hide everything in #sectionOne. Then later I want to to say hide everything in #sectionOne except....

remember I will have any number of sections with any number of fields, so I want a shorter way than just lines of $(#txt_123).hide();/$(#txt_124).show();

I just really want a clean way of say hide everything in this section except......

Upvotes: 0

Views: 446

Answers (4)

fatiDev
fatiDev

Reputation: 5992

add a class to that inputs , 

<input class ='inputs'>

with jquery : $(".inputs").hide();

Upvotes: 0

Prem
Prem

Reputation: 5974

You can do,

$("fieldset#sectionOne input").hide();

About except option,
I think its better to select which elements to hide by applying a common class to all the elements that you want to hide.

Upvotes: 1

ddavison
ddavison

Reputation: 29032

One way to achieve this is to apply a class to the inputs.

$("fieldset").find("input").each(function() {
  if ( $(this).hasClass("hidden") ...
});

You can also add some additional functionality ... note : not sure how you plan to show things...

$("fieldset").click(function() {
  $(this).find("input").each(function() {
    $(this).click(function() { $(this).removeClass("hidden") });
  });
});

etc etc...

Upvotes: 0

jrharshath
jrharshath

Reputation: 26583

Why not hide the section itself?

$('#sectionOne').slideUp();

if you really want to hide the contents, use

$('#sectionOne legend,input,select,textarea').slideUp();

Upvotes: 1

Related Questions