Clever Geek Handbook

Adding support for HTML5 hidden attributes to the jQuery.toggle () method

I want to bind HTML5hidden

using jQuery.toggle () method.

So, given <p id="myElement">Hi there</p>

$('#myElement').toggle()

will hide the element and set hidden="hidden"

:

<p id="myElement" style="display: none;" hidden="hidden">Hi there</p>

And executing the same $('#myElement').toggle()

script will show (toggle) the element again and remove the property hidden="hidden"

(it's boolean):

<p id="myElement" style="display: inline">Hi there</p>

I probably want to use the complete function method , maybe something like strings

$('#myElement').toggle(
    if ($this.css('display')==='none'){
       $this.prop('hidden', 'hidden');
    }
    else
    {
       $this.removeProp('hidden');
    }
)

What's the most efficient .toggle()

HTML5 attribute toggle extension solution hidden

? Is it redundant?

This question is a variant of Adding WAI-ARIA support for the jQuery.toggle () method ; it was determined that it would be redundant to toggle state aria-hidden

in combination with toggling the display of items.

+3


source to share


2 answers


Some comments on the subject, which may or may not be helpful, put this as an answer as it is too long to fit into a comment :-) -

While the idea hidden

is that it has the potential to be more accessible than display:none

(it doesn't require an accessibility tool to know CSS), there is currently no specific or testable benefit that I know of due to the scrolling developers supporting CSS approach anyway.

(... or rather, browsers that run flashers are already parsing CSS and passing hidden information to screen programs via the platform's accessibility API. Probably the main tools that can benefit from hidden

will be other accessibility tools that work directly with their its own copy of the DOM, rather than interacting with the "host" browser.)

(Also, although CSS would be purely presentational in an ideal world, it is often not used. Usage display:none

is one case where it is not used - it is often used to indicate that content is currently irrelevant, which is semantic information , a hidden

is a case, but there are other cases that need to be addressed as well: the generated content is perhaps the main other case.)



I am somewhat hesitant to use new features until I can test their behavior and work as planned: it is not uncommon for new features to be specified in one way, but ultimately implemented in a completely different way, which has consequences as much as possible use this function. (The use of ARIA role = "application" is a good example of a feature that has a lot of caveats .) And at the end of the day, it doesn't fit the spec that makes the page available or not, as the whole collection of content, browser and firmware (or other accessibility toolkit) works together, which is important for the end user.

Another issue to be aware of, the HTML5 spec says about the attributehidden

:

[...] For example, it is inappropriate to use hidden panels to hide panels in a tabbed dialog, since the tabbed interface is just a kind of overflow view [...]

However, tabbed dialog boxes are common use case for jQuery toggle

/ show

/ hide

/ etc; therefore, application hidden

in all of these cases may be [technically] against specification. It seems that the same reasoning applies to menumars menus and their popup menus.

+2


source


The property hidden

can be toggled using the full function of the method .toggle()

:

$('#myElement').toggle(function() {
    if ($(this).css('display')==='none'){
       $(this).prop('hidden', 'hidden');
    }
    else
    {
       $(this).removeProp('hidden');
    }
})

See http://jsfiddle.net/jhfrench/g8Sqy/ for a working example



Notes:

  • use $(this)

    rather than$this

  • you need to declare a function ( .toggle(function() {...})

    , not .toggle(...

    )
  • Using callback Locality toggle hidden

    , really, really slower than normal.toggle()

+2


source






More articles:


All Articles