2

In this fiddle i have a part of my form: http://jsfiddle.net/ZXSKH/55/

I am trying to hide a label and 1 input field on default by selecting the class with css and setting display:none. This works for selecting the "input" however for the labels this isn't working since Somewhere else I use display:inline-block or block wich then again makes the labels visible.

Instead of doing this in the css, should i hide the label and inputfield with jquery? Could someone help me with that?

logistef
  • 746
  • 1
  • 7
  • 20

6 Answers6

3

You would make your life easier if you placed a div tag around the fields you wanted to hide, that way, your jQuery code can show/hide that specific div (give it an id to target it). That way, setting display to inline-block or block on the labels won't make a difference because your div containing the label is already hidden.

Amos M. Carpenter
  • 4,848
  • 4
  • 42
  • 72
  • @logistef Glad to help :-) Be liberal with applying divs to your HTML to group sections that belong together semantically - that's what they're for after all! – Amos M. Carpenter Nov 03 '11 at 09:35
1

You can use jquery to hide label and inputfield. It can be done very easily using jquery

Eg.

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

or You can also use jquery hide method

Eg.

$(id).hide();
Dipen
  • 821
  • 2
  • 8
  • 13
1

As i have seen in you code and html, you are adding all the control without any container. use either table or div.

i prefer to use <div>. if you want to follow with the same then follow these two links as reference to reset your css for particular item and then set its visibility in css to hidden as:

h1.hidden {visibility:hidden;}

Jquery: How to check if the element has certain css style

http://api.jquery.com/css/

put your hidden controls in div and then you can use $('#divName1').hide() or $('#divName1').show() to implement your functionality.

you can generate dynamic html content rather than specifying one set of control on the click of checked item.. using insertAfter like methods of jquery. you can get more detail about this on following link:

http://api.jquery.com/?ns0=1&s=insertafter&go=

Select InsertAfter to detail examples to simplify your process.

Community
  • 1
  • 1
Niranjan Singh
  • 18,017
  • 2
  • 42
  • 75
  • This is only a very small part of a huuge form +70 input fields with more thant 20divs. Didn't wan't to make things complicated. – logistef Nov 03 '11 at 11:26
  • you can follow the first approach to put hiding controls inside the div as i firstly said... it will reduce the efforts half rather than your correct one... you have to select single except three or four inside it... – Niranjan Singh Nov 03 '11 at 11:51
0

javascript though! give a try.

    <script type="text/javascript">
    <!--
    function ShowOrHide(id) {
       var e = document.getElementById(id);
       e.style.display = 'block';
    }
function Hide(id) {
       var e = document.getElementById(id);

          e.style.display = 'none';

    }
    //-->
    </script>
Kris
  • 8,680
  • 4
  • 39
  • 67
0

You shouldn't have to use javascript here to solve what appears to be only a display issue. It's better practice to find a solution with css rather than using the wrong tool to solve the problem. Why do you need to set the label display to block elsewhere? Can that be made more specific to a particular label that needs to show, leaving the rest to be hidden?

Brighty
  • 383
  • 2
  • 11
0

you could override the display: inline-block etc with !important, so create a class

.hidden{display: none !important;}

apply to your label or whatever

<label id="my-label" class="hidden"></label>

and if you want to remove it (make it visible), use jquery

$("#my-label").removeClass("hidden");
Modika
  • 6,192
  • 8
  • 36
  • 44
  • sorry, but I disagree with this approach for something as trivial as this example. Avoid using `!important` labels except as a last resort, since it throws a spanner in the works of the natural way a style cascades. Besides, jQuery has functions for showing and hiding things, no need to manually add/remove classes. – Amos M. Carpenter Nov 04 '11 at 00:04