How to remember hide attributes on Refresh

Thanks catacaustic! That really helped.

After doing some studying on implementing cookies on WordPress this is the system I have come up with.

1. First, referencing the javascript’s document.cookies is a little difficult to work with so I created a global javascript for the entire website that has the following functions getCookie(), setCookie().

   // Functions for Get/Set/Delete of cookies
   
   function setCookie(cname, cvalue, exNum = 0, exDur = 'days') 
   {
       var expires = '', d = new Date();
       
       if(exDur == 'secs')         exNum = exNum*1000;
       else if(exDur == 'mins')    exNum = exNum*60*1000;
       else if(exDur == 'hours')   exNum = exNum*60*60*1000;
       else                        exNum = exNum*24*60*60*1000;
   
       if(exNum)
       {
           d.setTime(d.getTime() + exNum);
           expires = ";expires="+ d.toUTCString();
       }
   
       document.cookie = cname + "=" + cvalue + expires;
   }
   
   function getCookie(cname) 
   {
       var name = cname + "=";
       var decodedCookie = decodeURIComponent(document.cookie);
       var ca = decodedCookie.split(';');
       for(var i = 0; i <ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) == ' ') {
           c = c.substring(1);
       }
       if (c.indexOf(name) == 0) {
           return c.substring(name.length, c.length);
       }
       }
       return "";
   }

2. I then added the reference into my functions.php

   wp_enqueue_script('java-cookie-func', get_theme_file_uri('/js/cookieFunctions.js'), NULL, '1.0', false); // Java global functions for Cookies

3. Whenever a tab is navigated to, I set the cookie with a time of 0 so its only for the current session

   NavigateProfile(event)
       {
           // Get the name of the tab user is navigating to
           if($(event.target).is('button'))
               var tab = $(event.target).data('tab');
           else
               var tab = event;
           
           // Get the elements of the current tab and the target tab
           var currentDiv = $("#profile").find('div.tab.tab').not('.hide');
           var tabDiv = $("#profile").find('div[data-tab="' + tab +'"]');
   
           // Change visibility
           currentDiv.addClass('hide');
           tabDiv.removeClass('hide');
   
           setCookie('profile-tab', tab);
       }

4. Then last, I made my div class on that page have a class set depending on that cookie.

   <div class="section tab <? if($_COOKIE['profile-tab'] != 'account') echo 'hide'; ?>" data-tab="account">
   //... The Tabs contents
   </div>

It seems to be working like it’s supposed to! Thumbs up.

• This reply was modified 6 years, 10 months ago by Jon Klassen.
• This reply was modified 6 years, 10 months ago by Jon Klassen.
• This reply was modified 6 years, 10 months ago by Jon Klassen.