|
290 | 290 | }
|
291 | 291 |
|
292 | 292 | /**
|
293 |
| - * Element.toggle(@element) -> Element |
| 293 | + * Element.toggle(@element[, bool]) -> Element |
294 | 294 | *
|
295 |
| - * Toggles the visibility of `element`. Returns `element`. |
| 295 | + * Toggles the CSS `display` of `element`. Returns `element`. |
| 296 | + * |
| 297 | + * Switches an element's CSS `display` between `none` and its inherited |
| 298 | + * value (usually `block` or `inline`). |
| 299 | + * |
| 300 | + * By default, `toggle` will switch the display to the opposite of its |
| 301 | + * current state, but will use the `bool` argument instead if it's |
| 302 | + * provided (`true` to show the element, `false` to hide it). |
296 | 303 | *
|
297 | 304 | * ##### Examples
|
298 | 305 | *
|
|
305 | 312 | * $('error-message').toggle();
|
306 | 313 | * // -> Element (and displays div#error-message)
|
307 | 314 | *
|
| 315 | + * $('error-message).toggle(true); |
| 316 | + * // -> Element (and displays div#error-message, no matter what its |
| 317 | + * // previous state) |
| 318 | + * |
308 | 319 | * Toggle multiple elements using [[Enumerable#each]]:
|
309 | 320 | *
|
310 | 321 | * ['error-message', 'welcome-message'].each(Element.toggle);
|
|
314 | 325 | *
|
315 | 326 | * $('error-message', 'welcome-message').invoke('toggle');
|
316 | 327 | * // -> [Element, Element]
|
| 328 | + * |
| 329 | + * $('error-message', 'welcome-message').invoke('toggle', false); |
| 330 | + * // -> [Element, Element] (and hides both elements, no matter what |
| 331 | + * their previous state) |
| 332 | + * |
317 | 333 | *
|
318 | 334 | * ##### Notes
|
319 | 335 | *
|
|
331 | 347 | *
|
332 | 348 | * <div id="hidden-by-css"></div>
|
333 | 349 | *
|
334 |
| - * $('hidden-by-css').toggle(); // WONT' WORK! |
| 350 | + * $('hidden-by-css').toggle(); // WON'T WORK! |
335 | 351 | * // -> Element (div#hidden-by-css is still hidden!)
|
336 | 352 | **/
|
337 | 353 | function toggle(element, bool) {
|
|
2485 | 2501 | }
|
2486 | 2502 |
|
2487 | 2503 | /**
|
2488 |
| - * Element.toggleClassName(@element, className) -> Element |
| 2504 | + * Element.toggleClassName(@element, className[, bool]) -> Element |
2489 | 2505 | *
|
2490 | 2506 | * Toggles the presence of CSS class `className` on `element`.
|
| 2507 | + * |
| 2508 | + * By default, `toggleClassName` will flip to the opposite state, but |
| 2509 | + * will use `bool` instead if it's given; `true` will add the class name |
| 2510 | + * and `false` will remove it. |
2491 | 2511 | *
|
2492 | 2512 | * ##### Examples
|
2493 | 2513 | *
|
|
2500 | 2520 | * // -> false
|
2501 | 2521 | *
|
2502 | 2522 | * $('mutsu').toggleClassName('fruit');
|
2503 |
| - * // -> element |
| 2523 | + * // -> Element |
2504 | 2524 | *
|
2505 | 2525 | * $('mutsu').hasClassName('fruit');
|
2506 | 2526 | * // -> true
|
| 2527 | + * |
| 2528 | + * $('mutsu').toggleClassName('fruit', true); |
| 2529 | + * // -> Element (keeps the "fruit" class name that was already there) |
2507 | 2530 | **/
|
2508 | 2531 | function toggleClassName(element, className, bool) {
|
2509 | 2532 | if (!(element = $(element))) return;
|
|
0 commit comments