how to make visible of a hidden fieldset on button onlcick Options

[shankar from vizag]

Good morning

I have given a fieldset attribute as hidden and how can I make the same onclick of the button.

<fieldset hidden>
<legend>Name of block </legend>
</fieldset>


<input type = "button" value = "show fieldset"/>

how to get visible (THE FIELDSET BOCK) on onclick of the button.

kindly help me out in this regard

This post has been edited by shankar from vizag: Aug 1 2015, 12:16 AM

[Frederiek]

Try searching for "show hide fieldset javascript". You then probably need to hide the fieldset otherwise than with the hidden attribute, e.g. with CSS.

[CharlesEF]

I agree with Frederiek, there is no hidden attribute for <fieldset>. It all has to be done with CSS and javascript.

[pandy]

Oddly enough it actually works in gecko and Iron. Not in IE, but my version is very old so don't know about newer ones.

It seems hidden works with anything in the above mentioned browsers. For example this.

CODE

<p hidden>Hello</p>

Seems you have discovered something people would have been thrilled about back in the pre CSS days. Maybe they did know and I was the only one who missed it. Or it didn't work with the browsers of that time.

That said, don't use it. Hide the block onload with JavaScript.

[CharlesEF]

Hey, it works in Firefox v39 also. But I too have never heard of it so I would not use it either. Stick with CSS and javascript.

[pandy]

If it worked in old browsers it would have been possible to do show/hide stuff long before CSS - provided the property can be changed with JS when used with random elements. Just imagine...

[pandy]

Aw crap! We are all wrong. There is a hidden attribute that goes with any element in HTML5. Should have guessed.
http://davidwalsh.name/html5-hidden
https://html.spec.whatwg.org/multipage/inte...idden-attribute

According to w3schools (which isn't a totally reliable source) Netscape has used it since good ol' version 4.
http://www.w3schools.com/tags/att_global_hidden.asp


That means the answer to your question is give the FIELDSET and id and then just remove the hidden attribute with JS.

HTML

<p hidden id="foo">Hello</p>
<input type="button" onclick="doDa()">

CODE

function doDa()
{
   document.getElementById('foo').removeAttribute('hidden');
}

[pandy]

I was too quick again. There's an example of a neater way to do it at https://html.spec.whatwg.org/multipage/inte...idden-attribute .

[CharlesEF]

I'll stick with what I know.

[pandy]

Reading the spec I realized hidden can also be switched to visible using the display property. Logical really when you think about it.

[Christian J]

According to w3schools (which isn't a totally reliable source) Netscape has used it since good ol' version 4.
http://www.w3schools.com/tags/att_global_hidden.asp

No, it says Firefox4. Confirmed by http://caniuse.com/#feat=hidden

That means the answer to your question is give the FIELDSET and id and then just remove the hidden attribute with JS.

HTML

<p hidden id="foo">Hello</p>
<input type="button" onclick="doDa()">

CODE

function doDa()
{
   document.getElementById('foo').removeAttribute('hidden');
}

That would make the page JS-dependent, though. Alas even W3C's own code example at http://www.w3.org/TR/html5/editing.html#the-hidden-attribute is JS-dependent, which violates their own accessibility guidelines: http://www.w3.org/TR/WCAG10/#gl-new-technologies

It's better coding practice to both insert and remove the HIDDEN attribute with javascript, then the content will still be accessible if JS is not used.

[Christian J]

I have given a fieldset attribute as hidden and how can I make the same onclick of the button.

<fieldset hidden>
<legend>Name of block </legend>
</fieldset>


<input type = "button" value = "show fieldset"/>

how to get visible (THE FIELDSET BOCK) on onclick of the button.

Not sure if the HIDDEN attribute is (semantically) suitable for hiding FIELDSET form sections. According to W3C,

"The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar."
http://www.w3.org/TR/html5/editing.html#the-hidden-attribute

I'd switch between CSS display none/block instead (with the default being "block" for users without javascript).

[pandy]

I don't see there's a difference. Provided the fiealdset is hidden onload, as you pointed out.

[Christian J]

Difference between what?

[pandy]

Between turning the hidden attribute off and on and toggling display.

[Christian J]

Don't know what W3C meant with the part I quoted, would they say the same about the CSS display technique?

Technically there might be a difference for users with CSS disabled (but JS still enabled):

CODE

<p id="x">Hidden even without CSS</p>
<input type="button" value="Show x" onclick="document.getElementById('x').hidden=false;">
<script type="text/javascript">
if(window.addEventListener)
{
    window.addEventListener('load', function(){document.getElementById('x').hidden=true;}, false);
}
</script>

<p id="y">Hidden with CSS only</p>
<input type="button" value="Show y" onclick="document.getElementById('y').style.display='block';">
<script type="text/javascript">
if(window.addEventListener)
{
    window.addEventListener('load', function(){document.getElementById('y').style.display='none';}, false);
}
</script>

Maybe one could say that the HIDDEN attribute affects structure, while the CSS "display" property is still just presentation. But that's not quite correct either:

"Elements in a section hidden by the hidden attribute are still active, e.g. scripts and form controls in such sections still execute and submit respectively. Only their presentation to the user changes."
http://www.w3.org/TR/html5/editing.html#the-hidden-attribute

So it seems HIDDEN is a presentational attribute after all, the kind of thing that was deprecated in HTML4?

This post has been edited by Christian J: Aug 2 2015, 08:10 AM