Javascript Girl
  1. Javascript Girl
  3. Comment se rappeler de montrer et cacher div avec un cookie
Intereting Posts
Afficher le div lorsque le bouton radio est sélectionné Vérifiez si la latitude et la longitude sont dans un cercle Google Maps Chargement du fichier json sur d3.js Comment vérifier si un objet est un proxy? Chargement asynchrone d'images avec jQuery Javascript RegExp + limites de mots + caractères unicode Comment générer des graphiques d'appel pour un javascript donné? Sélecteur jQuery pour les entrées avec crochets dans l'attribut name Mathématiques 3D: espace d'écran vers l'espace mondial Safari Date Javascript () NaN Issue (aaaa-MM-jj HH: mm: ss) Créez un champ caché dans JavaScript JQuery UI Sortable: défilez la page entière ainsi que le conteneur KineticJS – Obtenez la largeur / hauteur d'une forme de chemin? Quel est le code `… $ {…} …` dans le nœud docs? Assurer un élément est concentré

Comment se rappeler de montrer et cacher div avec un cookie

J'ai un HTML comme: 

<div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div>

Et j'utilise Jquery pour afficher / masquer div comme: 

  $(document).ready(function () { $("#expand-hidden").click(function () { $("#mainleft-content").toggle(); }); });

Je veux utiliser un cookie pour se rappeler que l'état de div est caché ou montre que les visiteurs manipulent.

Comment puis-je le faire? Merci pour votre aide.

Voir JSFIDDLE

Voici du violon

Vous pouvez utiliser is(":visible") à cette fin, il vous renverra si div est visible ou non: 

 if ( $("#mainleft-content").is(":visible") ){ alert('its visible'); } else{ alert('div is hidden'); }

Si vous avez encore besoin des cookies, vous pouvez ajouter une fonction: 

 function setCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value; } function getCookie(c_name) { var i, x, y, ARRcookies = document.cookie.split(";"); for (i = 0; i < ARRcookies.length; i++) { x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); x = x.replace(/^\s+|\s+$/g, ""); if (x == c_name) { return unescape(y); } } }

Et réglez le cookie: 

 $(document).ready(function () { $("#expand-hidden").click(function () { $("#mainleft-content").toggle(); SetCookie("DivStateVisible", $("#mainleft-content").is(":visible"),5); }); });

Avec jQuery en utilisant jquery-cookie : 

 function setCookie(c_name, value, exdays) { $.cookie(c_name, value, { expires : exdays }); } function getCookie(c_name) { return $.cookie(c_name); }

Utilisation de http://plugins.jquery.com/cookie/ 

 $(document).ready(function () { $("#mainleft-content").toggle(!!$.cookie("visible")); $("#expand-hidden").click(function () { $("#mainleft-content").toggle(function() { $.cookie("visible", $("#mainleft-content").is(':visible') ? 1 : 0); }); }); });

U peut utiliser le plugin: https://github.com/carhartl/jquery-cookie

Et il suffit de définir des états comme 

 $.cookie("visible", 1);