Étiquette : toggle

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

06/06/2022 / admin

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

<p>
  Please click the following checkbox.
</p>
<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>
<div hidden="" id="tooltip">
  Thanks for toggling! Please click again to hide me.
</div>

<p>

Please click the following checkbox.

</p>

<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>

Thanks for toggling! Please click again to hide me.

</div>

;(function () {
  $(document).ready(function () {
    var $checkbox, $tooltip
    $checkbox = $('input')
    $tooltip = $('#tooltip')
    return $checkbox.change(() => {
      if ($tooltip.attr('hidden') === 'hidden') {
        return $tooltip.removeAttr('hidden')
      } else {
        return $tooltip.attr('hidden', true)
      }
    })
  })
}.call(this))

;(function () {

$(document).ready(function () {

var $checkbox, $tooltip

$checkbox = $('input')

$tooltip = $('#tooltip')

return $checkbox.change(() => {

if ($tooltip.attr('hidden') === 'hidden') {

return $tooltip.removeAttr('hidden')

} else {

return $tooltip.attr('hidden', true)

}

})

}.call(this))

Fichier `wcag-toggle.js`:

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/
define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.wcagToggle', {
        options: {
            toggleableElement: ''
        },

        /**
         * Create widget
         * @private
         */
        _create: function() {
            // console.log("%c wcagToggle", "background: yellow");

            this.element.on('click', $.proxy(this._toggleOnOff, this));
            // ...is similar to:
            // this.element.on('click', this._toggleOnOff.bind(this));
        },

        /**
         * Toggle On/Off
         * @private
         */
        _toggleOnOff: function() {
            if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {
                $(this.options.toggleableElement).removeAttr('hidden');
                this.element.attr('aria-expanded', true);
            } else {
                $(this.options.toggleableElement).attr('hidden', true);
                this.element.attr('aria-expanded', false);
            }
        }

    });

    return $.mage.wcagToggle;
});

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.wcagToggle', {

options: {

toggleableElement: ''

/**

* Create widget

* @private

_create: function() {

// console.log("%c wcagToggle", "background: yellow");

this.element.on('click', $.proxy(this._toggleOnOff, this));

// ...is similar to:

// this.element.on('click', this._toggleOnOff.bind(this));

/**

* Toggle On/Off

* @private

_toggleOnOff: function() {

if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {

$(this.options.toggleableElement).removeAttr('hidden');

this.element.attr('aria-expanded', true);

} else {

$(this.options.toggleableElement).attr('hidden', true);

this.element.attr('aria-expanded', false);

}

});

return $.mage.wcagToggle;

});

Fichier `PHTML`:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

<div class="field choice newsletter">
    <input type="checkbox" id="is_subscribed" />
    <label for="is_subscribed" class="label"></label>
</div>

<div id="is_subscribed_is_checked" hidden="">
</div>

</div>

</div>

    <script type="text/x-magento-init">
        {
            "#is_subscribed": {
                "wcagToggle": {
                    "toggleableElement": "#is_subscribed_is_checked"
                }
            }
        }
    </script>

{

"#is_subscribed": {

"wcagToggle": {

"toggleableElement": "#is_subscribed_is_checked"

}

</script>

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

var config = {
    map: {
        '*': {
            wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'
        }
    }
};

var config = {

map: {

'*': {

wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'

}

};

[UIkit] Exploiter le composant Toggle pour ajouter une fonctionnalité voir plus/voir moins

07/05/2021 / admin

Testé fonctionnel UIkit v3.6.19. Documentation officielle.

L’astuce consiste à initialiser le composant toggle d’UIkit sur une classe (.is-toggle dans mon exemple) relative à un ID (#filter---CustomizationTechniques dans mon exemple) placé dans le DOM sur un élément parent/englobant:

    <div id="filter---CustomizationTechniques" class="uk-form-controls">
        [...]
        <div class="is-toggle" hidden>
            [...]
        </div>
        <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle">
            <span class="is-toggle">Voir plus</span>
            <span class="is-toggle" hidden>Voir moins</span>
        </a>
    </div>

[...]

[...]

</div>

<span class="is-toggle" hidden>Voir moins</span>

</a>

</div>

Code complet:

<div class="uk-margin">
    <div class="uk-form-label">Technique de personnalisation</div>
    <div id="filter---CustomizationTechniques" class="uk-form-controls">
        <label><input class="uk-checkbox" type="checkbox"> Tampographie</label><br>
        <label><input class="uk-checkbox" type="checkbox"> Sérigraphie</label><br>
        <label><input class="uk-checkbox" type="checkbox"> Transfert sérigraphique</label><br>
        <label><input class="uk-checkbox" type="checkbox"> Transfert numérique</label><br>
        <label><input class="uk-checkbox" type="checkbox"> Impression numérique directe</label><br>
        <div class="is-toggle" hidden>
            <label><input class="uk-checkbox" type="checkbox"> Broderie</label><br>
            <label><input class="uk-checkbox" type="checkbox"> Ecussons brodés</label><br>
            <label><input class="uk-checkbox" type="checkbox"> Sublimation</label><br>
            <label><input class="uk-checkbox" type="checkbox"> Gravure laser</label><br>
            <label><input class="uk-checkbox" type="checkbox"> Doming</label><br>
            <label><input class="uk-checkbox" type="checkbox"> Autocollants</label><br>
            <label><input class="uk-checkbox" type="checkbox"> Laser sur polaire et microfibre</label>
        </div>
        <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle">
            <span class="is-toggle">Voir plus</span>
            <span class="is-toggle" hidden>Voir moins</span>
        </a>
    </div>
</div>

<div class="uk-form-label">Technique de personnalisation</div>

<label><input class="uk-checkbox" type="checkbox"> Tampographie</label><br>

<label><input class="uk-checkbox" type="checkbox"> Sérigraphie</label><br>

<label><input class="uk-checkbox" type="checkbox"> Transfert sérigraphique</label><br>

<label><input class="uk-checkbox" type="checkbox"> Transfert numérique</label><br>

<label><input class="uk-checkbox" type="checkbox"> Impression numérique directe</label><br>

<label><input class="uk-checkbox" type="checkbox"> Broderie</label><br>

<label><input class="uk-checkbox" type="checkbox"> Ecussons brodés</label><br>

<label><input class="uk-checkbox" type="checkbox"> Sublimation</label><br>

<label><input class="uk-checkbox" type="checkbox"> Gravure laser</label><br>

<label><input class="uk-checkbox" type="checkbox"> Doming</label><br>

<label><input class="uk-checkbox" type="checkbox"> Autocollants</label><br>

<label><input class="uk-checkbox" type="checkbox"> Laser sur polaire et microfibre</label>

</div>

<span class="is-toggle" hidden>Voir moins</span>

</a>

</div>

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

18/03/2019 / admin

Note: ce plugin est une évolution du code posté dans un précédent billet: [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page.

Demo jsfiddle.net. Appuyez sur F12 pour voir les console.log();

Se référer au Git car la doc et le code présentés dans ce billet ne sont plus à jour! nui-Toggle on GitHub.

Description

Ce plugin permet d’afficher/masquer (en off-canvas) un petit encart en sticky dans la page. Sur la capture ci-dessus il s’agit d’un petit menu, utilisé dans une page longue, qui permet de naviguer d’ancre en ancre. Le clic sur le chevron masque le menu. Le chevron reste visible afin de pouvoir, au clic, faire ré-apparaître le menu.

La petite particularité de ce plugin est qu’il gère également l’état affiché/masqué lorsque la page est rechargée (si l’utilisateur a masqué le menu, celui-ci reste masqué au rechargement de la page et pour des connexions ultérieures aussi longtemps que ce premier n’a pas cliqué pour le ré-afficher). Ce comportement est rendu possible en exploitant la propriété localStorage de l’objet Window.

Usage:

Adapter à votre source HTML

  // Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local
  const $IN_PAGE_NAVIGATION = $('#inPageNavigation'),
        IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED = $IN_PAGE_NAVIGATION.attr('aria-expanded');

  $IN_PAGE_NAVIGATION.nuiToggle('#toggleInPageNavigation', IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED);
  // fin: Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

// Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

const $IN_PAGE_NAVIGATION = $('#inPageNavigation'),

IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED = $IN_PAGE_NAVIGATION.attr('aria-expanded');

$IN_PAGE_NAVIGATION.nuiToggle('#toggleInPageNavigation', IN_PAGE_NAVIGATION_DEFAULT_ARIA_EXPANDED);

// fin: Fermer/Ouvrir l'encart d'accès rapide et stocker l'état en local

Source HTML

Ce qu’il faut comprendre: 2 choses à vérifier:

Vous avez un élément parent (ici <div id="inPageNavigation">[...]</div>) qui va contenir l’ensemble des informations à afficher/masquer.
Vous avez un élément OBLIGATOIREMENT enfant du parent <div id="inPageNavigation">[...]</div> qui va permettre, au clic sur celui-ci, d’afficher/masquer le parent (ici un bouton <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"></button>, mais ça peut également être un lien).

<div id="inPageNavigation" class="InPageNavigation" aria-expanded="true">
  <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button">
    <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i>
  </button>
  <p>Accès rapide:</p>
  <ul>
    <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>
    <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>
    <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>
    <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>
    <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>
  </ul>
</div>

</button>

<p>Accès rapide:</p>

<ul>

<li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>

<li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>

<li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>

<li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>

<li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>

</ul>

</div>

Source JS (jQuery)

/**
 * "Naked UI Toggle" jQuery plug-in
 * @author: Frank LANG (https://github.com/franklang/)
 *
 * Usage:
 * $('#targetElement').nuiToggle('#triggerElement', default value for #targetElement's state in the HTML (true or false));
 */
;( function ( $, window, undefined ) {
  $.fn.nuiToggle = function(triggerElement, localStorageDefaultValue) {

    var defaults = {
      triggerElement: triggerElement,
      storedValue: localStorageDefaultValue
    };

    var settings = $.extend( {}, defaults, triggerElement, localStorageDefaultValue );

    // Get a dynamic local storage KEY named after given #targetElement
    const $_THIS = this,
          $_SELECTOR = $_THIS.selector,
          LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length );

    // On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).
    let localStorageValue = localStorage.getItem( LOCAL_STORAGE_KEY );


    // Local Storage
    // If a KEY/VALUE pair is already set...
    if ( localStorageValue !== null ) {
        // console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + localStorageValue);
      // ...append VALUE to selector's aria-expanded attribute in the HTML.
      $_THIS.attr('aria-expanded', localStorageValue);

    // Else...
    } else {
        // console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ', so we create one with given default VALUE: ' + defaults.storedValue);
      // ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and given defaults.storedValue.
      localStorage.setItem( LOCAL_STORAGE_KEY, defaults.storedValue );

      // If HTML selector's aria-expanded default value doesn't match with given defaults.storedValue...
      if ( $_THIS.attr('aria-expanded') !== defaults.storedValue ) {
        // ...make it match in the HTML.
        $_THIS.attr('aria-expanded', defaults.storedValue);
      }
    }



    // On Click
    // When clicking on given triggerElement...
    $(defaults.triggerElement, $_THIS).on('click', function(){
      // ...store HTML selector's current aria-expanded value.
      const ARIA_EXPANDED_VALUE = $_THIS.attr('aria-expanded');

      // If selector's aria-expanded value is true...
      if ( ARIA_EXPANDED_VALUE === 'true' ) {
        // ...set it to false...
        $_THIS.attr('aria-expanded', false);
        // ...and update local storage VALUE accordingly.
        localStorage.setItem( LOCAL_STORAGE_KEY, false );
          // console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

      // Else...
      } else {
        // ...set it to true...
        $_THIS.attr('aria-expanded', true);
        // ...and update local storage VALUE accordingly.
        localStorage.setItem( LOCAL_STORAGE_KEY, true );
          // console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );
      }
    });
  };
}( jQuery, window ));

/**

* "Naked UI Toggle" jQuery plug-in

* @author: Frank LANG (https://github.com/franklang/)

* Usage:

* $('#targetElement').nuiToggle('#triggerElement', default value for #targetElement's state in the HTML (true or false));

;( function ( $, window, undefined ) {

$.fn.nuiToggle = function(triggerElement, localStorageDefaultValue) {

var defaults = {

triggerElement: triggerElement,

storedValue: localStorageDefaultValue

};

var settings = $.extend( {}, defaults, triggerElement, localStorageDefaultValue );

// Get a dynamic local storage KEY named after given #targetElement

const $_THIS = this,

$_SELECTOR = $_THIS.selector,

LOCAL_STORAGE_KEY = $_SELECTOR.substring( 1, $_SELECTOR.length );

// On page load or DOM ready, get current VALUE of dynamic local storage KEY (if it exists...).

let localStorageValue = localStorage.getItem( LOCAL_STORAGE_KEY );

// Local Storage

// If a KEY/VALUE pair is already set...

if ( localStorageValue !== null ) {

// console.log('There_s already a local storage KEY called: ' + LOCAL_STORAGE_KEY + ' and it_s VALUE is: ' + localStorageValue);

// ...append VALUE to selector's aria-expanded attribute in the HTML.

$_THIS.attr('aria-expanded', localStorageValue);

// Else...

} else {

// console.log('There_s NO local storage KEY called: ' + LOCAL_STORAGE_KEY + ', so we create one with given default VALUE: ' + defaults.storedValue);

// ...dynamically set a default KEY/VALUE pair regarding generated LOCAL_STORAGE_KEY and given defaults.storedValue.

localStorage.setItem( LOCAL_STORAGE_KEY, defaults.storedValue );

// If HTML selector's aria-expanded default value doesn't match with given defaults.storedValue...

if ( $_THIS.attr('aria-expanded') !== defaults.storedValue ) {

// ...make it match in the HTML.

$_THIS.attr('aria-expanded', defaults.storedValue);

}

// On Click

// When clicking on given triggerElement...

$(defaults.triggerElement, $_THIS).on('click', function(){

// ...store HTML selector's current aria-expanded value.

const ARIA_EXPANDED_VALUE = $_THIS.attr('aria-expanded');

// If selector's aria-expanded value is true...

if ( ARIA_EXPANDED_VALUE === 'true' ) {

// ...set it to false...

$_THIS.attr('aria-expanded', false);

// ...and update local storage VALUE accordingly.

localStorage.setItem( LOCAL_STORAGE_KEY, false );

// console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

// Else...

} else {

// ...set it to true...

$_THIS.attr('aria-expanded', true);

// ...and update local storage VALUE accordingly.

localStorage.setItem( LOCAL_STORAGE_KEY, true );

// console.log( 'KEY: ' + LOCAL_STORAGE_KEY + ' now set to VALUE: ' + localStorage.getItem( LOCAL_STORAGE_KEY ) );

}

});

};

}( jQuery, window ));

Source CSS

/* 
 * Off-Canvas in-page navigation component
 */

/* Core */
.InPageNavigation {
  position: fixed;
  z-index: 10000;
}

.btn-InPageNavigation--toggle {
  position: absolute;
}

/* Skin */
.InPageNavigation {
  top: 10px;
  padding: 10px;
  width: 250px;
  border: 1px solid #bfbfbf;
  background: #fff;
}

.InPageNavigation[aria-expanded="true"] {
  right: 10px;
}
.InPageNavigation[aria-expanded="false"] {
  right: -250px;
}

.btn-InPageNavigation--toggle,
.btn-InPageNavigation--toggle:hover {
  top: -1px;
  left: -40px;
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  border-right: none;
  background: #fff;
  font-size: 1.2em;
}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,
.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {
  display: none;
}
/* fin: Off-Canvas in-page navigation component */

* Off-Canvas in-page navigation component

/* Core */

.InPageNavigation {

position: fixed;

z-index: 10000;

}

.btn-InPageNavigation--toggle {

position: absolute;

}

/* Skin */

.InPageNavigation {

top: 10px;

padding: 10px;

width: 250px;

border: 1px solid #bfbfbf;

background: #fff;

}

.InPageNavigation[aria-expanded="true"] {

right: 10px;

}

.InPageNavigation[aria-expanded="false"] {

right: -250px;

}

.btn-InPageNavigation--toggle,

.btn-InPageNavigation--toggle:hover {

top: -1px;

left: -40px;

width: 40px;

height: 40px;

text-align: center;

border: 1px solid #bfbfbf;

border-right: none;

background: #fff;

font-size: 1.2em;

}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,

.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {

display: none;

}

/* fin: Off-Canvas in-page navigation component */

[jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page

14/03/2019 / admin

Attention: vous trouverez une évolution de ce code ici: [jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache.

nui = naked UI = code stripped to the core.

Dans mon exemple, j’utilise cette fonction pour un composant Off-Canvas qui propose une navigation interne à la page (via des ancres). J’affiche/masque l’élément en exploitant la valeur booléenne de la pseudo-classe aria-expanded que j’habille via CSS. Pas de SASS (pour l’instant), désolé…

J’utilise également Animate CSS pour apporter un peu d’animation au tout via les classes animated fadeInUp et le kit d’icônes Font Awesome pour les chevrons.

How to Create a Basic Plugin sur jquery.com. Essential jQuery Plugin Patterns par Addy Osmani sur smashingmagazine.com.

<div id="inPageNavigation" class="InPageNavigation animated fadeInUp" aria-expanded="true">
  <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button">
    <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i>
  </button>
  <p>Accès rapide:</p>
  <ul>
    <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>
    <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>
    <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>
    <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>
    <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>
  </ul>
</div>

</button>

<p>Accès rapide:</p>

<ul>

<li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>

<li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>

<li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>

<li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>

<li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>

</ul>

</div>

  $.fn.nuiToggleElement = function() {
    const $this = this;
    const ariaExpandedValue = $this.attr('aria-expanded');

    if (ariaExpandedValue === 'true' ) {
      $this.attr('aria-expanded', false);
    } else {
      $this.attr('aria-expanded', true);
    }
  }

$.fn.nuiToggleElement = function() {

const $this = this;

const ariaExpandedValue = $this.attr('aria-expanded');

if (ariaExpandedValue === 'true' ) {

$this.attr('aria-expanded', false);

} else {

$this.attr('aria-expanded', true);

}

  // Fermer/Ouvrir l'encart d'accès rapide
  $('#toggleInPageNavigation').on('click', function(){
    $('#inPageNavigation').nuiToggleElement();
  });  
  // fin: Fermer/Ouvrir l'encart d'accès rapide

// Fermer/Ouvrir l'encart d'accès rapide

$('#toggleInPageNavigation').on('click', function(){

$('#inPageNavigation').nuiToggleElement();

});

// fin: Fermer/Ouvrir l'encart d'accès rapide

/* 
 * Off-Canvas in-page navigation component
 */

/* Core */
.InPageNavigation {
  position: fixed;
  z-index: 10000;
}

.btn-InPageNavigation--toggle {
  position: absolute;
}

/* Skin */
.InPageNavigation {
  top: 10px;
  padding: 10px;
  width: 250px;
  border: 1px solid #bfbfbf;
  background: #fff;
}

.InPageNavigation[aria-expanded="true"] {
  right: 10px;
}
.InPageNavigation[aria-expanded="false"] {
  right: -250px;
}

.btn-InPageNavigation--toggle,
.btn-InPageNavigation--toggle:hover {
  top: -1px;
  left: -40px;
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  border-right: none;
  background: #fff;
  font-size: 1.2em;
}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,
.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {
  display: none;
}
/* fin: Off-Canvas in-page navigation component */

* Off-Canvas in-page navigation component

/* Core */

.InPageNavigation {

position: fixed;

z-index: 10000;

}

.btn-InPageNavigation--toggle {

position: absolute;

}

/* Skin */

.InPageNavigation {

top: 10px;

padding: 10px;

width: 250px;

border: 1px solid #bfbfbf;

background: #fff;

}

.InPageNavigation[aria-expanded="true"] {

right: 10px;

}

.InPageNavigation[aria-expanded="false"] {

right: -250px;

}

.btn-InPageNavigation--toggle,

.btn-InPageNavigation--toggle:hover {

top: -1px;

left: -40px;

width: 40px;

height: 40px;

text-align: center;

border: 1px solid #bfbfbf;

border-right: none;

background: #fff;

font-size: 1.2em;

}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,

.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {

display: none;

}

/* fin: Off-Canvas in-page navigation component */

[jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)

21/12/2016 / admin

Problème : l’élément sur lequel on souhaite placer le click n’accepte qu’un seul événement (on ne peut cliquer qu’une fois dessus. Au-delà, le clic ne fonctionne plus. Embêtant quand on veut faire de l’ouvrir/fermer…).

Solution: doubler l’élément sur lequel se fait l’événement click.

<div class="offer-benefit-heading">
    <h2>Les avantages du pack Premium</h2>
    <span class="more">
        <span class="open">&gt; En savoir plus</span>
        <span class="close">&gt; En savoir plus</span>
    </span>
</div>
<div class="offer-benefit" data-display="hidden">
    [...]
</div>

<h2>Les avantages du pack Premium</h2>

<span class="open">> En savoir plus</span>

<span class="close">> En savoir plus</span>

</span>

</div>

[...]

</div>

.offer-benefit{
    &[data-display="hidden"]{
        display: none;
    }
    &[data-display="shown"]{
        // nada 
    }
}

.offer-benefit{

&[data-display="hidden"]{

display: none;

}

&[data-display="shown"]{

// nada

}

    jQuery(document).ready(function(){
        var eClose = jQuery('.more .close');
            eOpen = jQuery('.more .open');
            eOfferBenefitHeading = jQuery('.offer-benefit-heading');
            eOfferBenefit = jQuery('.offer-benefit');

        eClose.hide();
        eOfferBenefitHeading.on('click', '.open', function(){
            eClose.show();
            eOpen.hide();
            eOfferBenefit.attr('data-display', 'shown');
        });
        
        eOfferBenefitHeading.on('click', '.close', function(){
            eClose.hide();
            eOpen.show();            
            eOfferBenefit.attr('data-display', 'hidden');
        });
    });

jQuery(document).ready(function(){

var eClose = jQuery('.more .close');

eOpen = jQuery('.more .open');

eOfferBenefitHeading = jQuery('.offer-benefit-heading');

eOfferBenefit = jQuery('.offer-benefit');

eClose.hide();

eOfferBenefitHeading.on('click', '.open', function(){

eClose.show();

eOpen.hide();

eOfferBenefit.attr('data-display', 'shown');

});

eOfferBenefitHeading.on('click', '.close', function(){

eClose.hide();

eOpen.show();

eOfferBenefit.attr('data-display', 'hidden');

});

[jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête

15/06/2015 / admin

Les versions récentes de Foundation incluent toute une batterie d’options pour le composant Accordion.

Le comportement standard consiste à pouvoir fermer un panneau au clic sur son en-tête. Tous les panneaux sont alors fermés.
Nous allons modifier le code natif du composant accordion.js de Foundation 3.5.2 afin qu’un panneau ouvert ne puisse plus être fermé (par l’utilisateur) au clic sur son en-tête.

Il suffit de repérer et de commenter la ligne suivante : p.find('li').removeClass('active').end().find('.content').hide();.

// Please note : this is a fork of original "jquery.foundation.accordion.js" code.
//
// Accordion panels could originaly be closed by clicking on their headers.
// When loading this fork, accordion panels can only be closed when another is opened by user.

;(function ($, window, undefined){
  'use strict';

  $.fn.foundationAccordion = function (options) {

    // DRY up the logic used to determine if the event logic should execute.
    var hasHover = function(accordion) {
      return accordion.hasClass('hover') && !Modernizr.touch
    };

    $(document).on('mouseenter', '.accordion li', function () {
        var p = $(this).parent();

        if (hasHover(p)) {
          var flyout = $(this).children('.content').first();

          $('.content', p).not(flyout).hide().parent('li').removeClass('active');
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      }
    );

    $(document).on('click.fndtn', '.accordion li .title', function () {
        var li = $(this).closest('li'),
            p = li.parent();

        if(!hasHover(p)) {
          var flyout = li.children('.content').first();

          if (li.hasClass('active')) {
            //p.find('li').removeClass('active').end().find('.content').hide();
          } else {
            $('.content', p).not(flyout).hide().parent('li').removeClass('active');
            flyout.show(0, function () {
              flyout.parent('li').addClass('active');
            });
          }
        }
      }
     );

  };

})( jQuery, this );

// Please note : this is a fork of original "jquery.foundation.accordion.js" code.

// Accordion panels could originaly be closed by clicking on their headers.

// When loading this fork, accordion panels can only be closed when another is opened by user.

;(function ($, window, undefined){

'use strict';

$.fn.foundationAccordion = function (options) {

// DRY up the logic used to determine if the event logic should execute.

var hasHover = function(accordion) {

return accordion.hasClass('hover') && !Modernizr.touch

};

$(document).on('mouseenter', '.accordion li', function () {

var p = $(this).parent();

if (hasHover(p)) {

var flyout = $(this).children('.content').first();

$('.content', p).not(flyout).hide().parent('li').removeClass('active');

flyout.show(0, function () {

flyout.parent('li').addClass('active');

});

}

);

$(document).on('click.fndtn', '.accordion li .title', function () {

var li = $(this).closest('li'),

p = li.parent();

if(!hasHover(p)) {

var flyout = li.children('.content').first();

if (li.hasClass('active')) {

//p.find('li').removeClass('active').end().find('.content').hide();

} else {

$('.content', p).not(flyout).hide().parent('li').removeClass('active');

flyout.show(0, function () {

flyout.parent('li').addClass('active');

});

}

);

};

})( jQuery, this );

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

18/12/2014 / admin

Source : jQuery click / toggle between two functions.
Plug-in : [jQuery-Function-Toggle-Plugin
] A jQuery plugin that binds multiple event handlers which are executed on each consecutive event.

Ajout d’un bouton Play/Pause au carousel Bootstrap : Simulation, fil de discussion sur Stack Overflow.

Problème : lancer deux opérations (ou fonctions) distinctes lorsqu’on clique sur un seul et même bouton (bouton play/pause par exemple).

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

(function($) {

$.fn.clickToggle = function(func1, func2) {

var funcs = [func1, func2];

this.data('toggleclicked', 0);

this.click(function() {

var data = $(this).data();

var tc = data.toggleclicked;

$.proxy(funcs[tc], this)();

data.toggleclicked = (tc + 1) % 2;

});

return this;

};

}(jQuery));

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

$('#test').clickToggle(function() {

$(this).animate({

width: "260px"

}, 1500);

function() {

$(this).animate({

width: "30px"

}, 1500);

});

Articles récents

Catégories

Archives

Méta

Étiquette : toggle

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

[UIkit] Exploiter le composant Toggle pour ajouter une fonctionnalité voir plus/voir moins

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

Description

Usage:

Adapter à votre source HTML

Source HTML

Source JS (jQuery)

Source CSS

[jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page

[jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)

[jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier wcag-toggle.js:

Fichier PHTML:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js:

Description

Usage:

Adapter à votre source HTML

Source HTML

Source JS (jQuery)

Source CSS

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`: