The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> how to make visible of a hidden fieldset on button onlcick
shankar from vizag
post Aug 1 2015, 12:15 AM
Post #1


Advanced Member
****

Group: Members
Posts: 166
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 1 2015, 03:22 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 1 2015, 06:08 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,680
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I agree with Frederiek, there is no hidden attribute for <fieldset>. It all has to be done with CSS and javascript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 08:41 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



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. wink.gif

That said, don't use it. Hide the block onload with JavaScript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 1 2015, 08:50 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,680
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 09:00 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



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... biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 09:06 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



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');
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 09:20 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 1 2015, 09:53 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 1,680
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'll stick with what I know.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 10:01 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



Reading the spec I realized hidden can also be switched to visible using the display property. Logical really when you think about it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 1 2015, 02:57 PM
Post #11


.
********

Group: WDG Moderators
Posts: 8,254
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Aug 1 2015, 04:06 PM) *

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. tongue.gif Confirmed by http://caniuse.com/#feat=hidden

QUOTE
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 rolleyes.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 1 2015, 02:58 PM
Post #12


.
********

Group: WDG Moderators
Posts: 8,254
Joined: 10-August 06
Member No.: 7



QUOTE(shankar from vizag @ Aug 1 2015, 07:15 AM) *

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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 05:19 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



I don't see there's a difference. Provided the fiealdset is hidden onload, as you pointed out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 1 2015, 08:04 PM
Post #14


.
********

Group: WDG Moderators
Posts: 8,254
Joined: 10-August 06
Member No.: 7



Difference between what? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2015, 09:14 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,454
Joined: 9-August 06
Member No.: 6



Between turning the hidden attribute off and on and toggling display.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 2 2015, 06:34 AM
Post #16


.
********

Group: WDG Moderators
Posts: 8,254
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 9th December 2019 - 11:00 AM