Show() Hide() Persistence

JavaScript
1

I am using the below jQuery to show and hide a DIVs based which radiobutton is clicked (Page1). When the user continues to the next page and then uses their back button to return to the Page1, there radiobutton they selected is still selected, however the DIV related to that radiobutton selection is not. How do I set up thepage to have the div related to the radiobutton select persist when the back button is used?


<script type="text/javascript">
$(document).ready(function() {
$("#firstClick").click(function() {
 $("#first").show();
  $("#second").hide();
	 });

$("#secondClick").click(function() {
 $("#first").hide();
  $("#second").show();
	 });
</script>




<input name="radio" type="radio" id="firstClick" value="radio" checked="checked" />
<input name="radio" type="radio" id="secondClick" value="radio"/>

<div id="first">Hello 1st div</div>
<div id="second" style="display:none">Hola 2nd div, adios First</div>

Thanks everyone!!!

2

Hi,

The reason this happens is that nothing persists - classes don’t persist because DOM is regenerated, JS variables don’t persist because code gets re-executed etc.
At the same time, browser implementations seem to pretty much agree to keep user-entered form data for convenience even though this behaviour is not part of any official spec.

One method to make the page remember which div was showing, would be to use local storage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Local Storage persistence example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <input name="radio" type="radio" id="firstClick" value="first" checked="checked" />
    <input name="radio" type="radio" id="secondClick" value="second"/>
    <p><a href="http://www.google.com">Leave page</a></p>

    <div id="first">Hello 1st div</div>
    <div id="second">Hola 2nd div, adios First</div>

    <script>
      $(document).ready(function() {
        var visible = localStorage['visible'];
        var hidden = localStorage['hidden'];

        if (typeof visible != 'undefined' && typeof hidden != 'undefined' ) {
          $(visible).show();
          $(hidden).hide();
        } else {
          $("#second").hide();
        }

        $('input[type=radio]').on("click", function() {
            $("#first, #second").toggle();
            if (localStorage) {
              localStorage['visible'] = "#" + $(this).attr('value');
              localStorage['hidden'] = "#" + $(this).siblings('input').attr('value');
            }
        });
      });
    </script>
  </body>
</html>

Although this works, I’m not sure this is the best way to do things, so if anyone else has any ideas, I’d be glad to hear them.

3

Hi Pullo, this is pretty close, the only issue I see is the toggle(), if you click the first radiobutton a second time it toggles the second div open. Any suggestions on how to fix this? Thanks for all your help!!

4

Oh dear, you’re quite right.
Attach your handler to the change event instead.
I’ve updated my code:

$(document).ready(function() {
  function showDivs(){
    if(typeof visible == 'undefined' && typeof hidden == 'undefined'){
      $("#second").hide();
    } else {
      $(visible).show();
      $(hidden).hide();
    }
  }

  $('input[type=radio]').on("change", function() {
    $("#first, #second").toggle();
    if (localStorage) {
      localStorage['visible'] = "#" + $(this).attr('value');
      localStorage['hidden'] = "#" + $(this).siblings('input').attr('value');
    }
  });

  var visible = localStorage['visible'];
  var hidden = localStorage['hidden'];
  showDivs();
});
5

I was working a solution earlier for this, but couldn’t quite get it to go. My thought was you could store whether a radio button was checked or not as a variable (true/false), then using an if statement trigger the hide() and show() based on that. I didn’t post anything because I had/still have limited time to try it, but if you can get that working, it should do well for you. I’ll mess with it more as I have time, and post back if I figure it out.

EDIT: Here’s the CodePen where I was messing with it. Maybe someone could fork & fix it? http://codepen.io/ronaldroe/pen/GyrEF

6

That’s what we were looking for. Way to go Ron!
You can boil the JS down to this:

$(document).ready(function() {
  $('input[type=radio]').each(function(){
    if (!$(this).prop("checked")==true){
      $("#" + $(this).attr('value')).hide();
    }
  });

  $('input[type=radio]').on("change", function() {
    $("#first, #second").toggle();
  });
})

Here’s the full code, just to be complete:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Show/hide persistence example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <input name="radio" type="radio" id="firstClick" value="first" checked="checked" />
    <input name="radio" type="radio" id="secondClick" value="second"/>
    <p><a href="http://www.google.com">Leave page</a></p>

    <div id="first">Hello 1st div</div>
    <div id="second">Hola 2nd div, adios First</div>

    <script>
      $(document).ready(function() {
        $('input[type=radio]').each(function(){
          if (!$(this).prop("checked")==true){
            $("#" + $(this).attr('value')).hide();
          }
        });

        $('input[type=radio]').on("change", function() {
          $("#first, #second").toggle();
        });
      });
    </script>
  </body>
</html>
7

Thanks for all the feedback Pullo and Ron. This is working on two radiobuttons perfectly, however it turns out it needs to be scalable with multiple radiobuttons and divs so the $(“#first, #second”).toggle(); doesn’t seem to work. Here is a sample with multiple divs and radiobuttons. Thoughts on how to replace the toggle()


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Show/hide persistence example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <input name="radio" type="radio" id="firstClick" value="first" checked="checked" />
    <input name="radio" type="radio" id="secondClick" value="second"/>
    
     <input name="radio" type="radio" id="thirdClick" value="third"/>
      <input name="radio" type="radio" id="fourthClick" value="fourth"/>
    <p><a href="http://www.google.com">Leave page</a></p>
    
    <div id="first">Hello 1st div</div>
    <div id="second">Hola 2nd div, adios First</div>
          <div id="third">3rd base</div>
    <div id="fourth">FOURRRRRR</div>

    <script>
      $(document).ready(function() {
        $('input[type=radio]').each(function(){
          if (!$(this).prop("checked")==true){
            $("#" + $(this).attr('value')).hide();
          }
        });
        
        $('input[type=radio]').on("change", function() {
          $("#first, #second, #third, #fourth").toggle();
        });
      });
    </script>
  </body>
</html>
8

This seems to work


 $(document).ready(function() {
        $('input[type=radio]').each(function(){
          if (!$(this).prop("checked")==true){
            $("#" + $(this).attr('value')).hide();
          }
        });
        
		
		$("#firstClick").click(function() {
 $("#first").show();
  $("#second").hide();
   $("#third").hide();
		  $("#fourth").hide();
	 });

$("#secondClick").click(function() {
 $("#first").hide();
  $("#second").show();
  $("#third").hide();
		  $("#fourth").hide();
		  
	});	 
	
	$("#thirdClick").click(function() {
 $("#first").hide();
  $("#second").hide();
  $("#third").show();
		  $("#fourth").hide();
		  
	});	   
	
		$("#fourthClick").click(function() {
 $("#first").hide();
  $("#second").hide();
  $("#third").hide();
		  $("#fourth").show();
		  
	});	 
		
		 });
9

Hi dude9er,

This will work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Show/hide persistence example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <input name="radio" type="radio" id="firstClick" value="#first" checked="checked" />
    <input name="radio" type="radio" id="secondClick" value="#second"/>
    <input name="radio" type="radio" id="thirdClick" value="#third"/>
    <input name="radio" type="radio" id="fourthClick" value="#fourth"/>
    <p><a href="http://www.google.com">Leave page</a></p>
    
    <div id="first" class="showHide">Hello 1st div</div>
    <div id="second" class="showHide">Hola 2nd div, adios First</div>
    <div id="third" class="showHide">3rd base</div>
    <div id="fourth" class="showHide">FOURRRRRR</div>

    <script>
      $(document).ready(function() {
        $('input[type=radio]').each(function(){
          if (!$(this).prop("checked")==true){
	    s = $(this).attr('value');
            $(s).hide();
          }
        });
        
        $('input[type=radio]').on("change", function() {
          $(".showHide").hide();
	  s = $(this).attr('value');
          $(s).show();
        });
      });
    </script>
  </body>
</html>

When the radio button state changes, I’m hiding all the divs, then showing the one corresponding to what was clicked.

Hope that helps.

10

Thanks Pullo, this is perfect.

Thanks Ron, for your help!!