1

I have a working example that keeps a div open using cookies. Part of the issue is that Im using a select list instead of a radio button. Another problem is that the values of the select list and corresponding div are dynamically generated. However, making things a little easier, the value of the select is ALWAYS the same as the div id. Im just trying to make it so if the page is reloaded, the div stays open. Here is the example that I think is close to what Im looking for:

<fieldset>
<ol class="formset">
  <li>
    <label for="fname2">First Name: </label>`
    <input type="text" id="fname2" value="" name="fname2"/>
  </li>
  <li>
    <label for="lname2">Last Name: </label><br />
    <input type="text" id="lname2" value="" name="lname2"/>
  </li>
  <li>
    <label for="email2">Email Address: </label><br />
    <input type="text" id="email2" value="" name="email2" />
  </li>
  <li>
    <label for="age2">Are you above 21 yrs old?</label><br />
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Yes
    <input type="radio" name="age2" value="No" class="aboveage2" /> No
  </li>
</ol>
<ol id="parent2" class="formset">
  <li>
    <strong>Parent/Guardian Information:</strong>
  </li>
  <li>
    <label for="pname2">Parent Name: </label>
    <input type="text" id="pname2" value="" name="pname2"/>
  </li>
  <li>
    <label for="contact2">Contact No.: </label><br />
    <input type="text" id="contact2" value="" name="contact2"/>
  </li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />  
</fieldset>

<script>
  $(document).ready(function(){
    $("#parent2").css("display","none");
    $(".aboveage2").click(function(){
      if ($('input[name=age2]:checked').val() == "No" ) {
        $("#parent2").slideDown("fast"); //Slide Down Effect
        $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
      } else {
        $("#parent2").slideUp("fast");  //Slide Up Effect
        $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
      }
    });
    var showTop = $.cookie('showTop');
    if (showTop == 'expanded') {
      $("#parent2").show("fast");
      $('input[name=age2]:checked');
    } else {
      $("#parent2").hide("fast");
      $('input[name=age2]:checked');
    }
  });
</script>

As a note Im using the cookie plugin found here: http://plugins.jquery.com/project/Cookie Closer to what Im doing and need help with is the following:

<html>
  <head>
    <script>
      $(document).ready(function() {
        $('div.book').css("display","none"); // display none on all ol that doesn't have book class
        $('#book_list').change(function() {
          $('div.book').slideUp("fast"); //Slide Up Effect
          $('#' + $(this).val()).slideDown("slow"); //Slide Down Effect
        });
      });
    </script>
  </head>
  <body>
    <form>
      <select id="book_list">
        <option value="">Select</option>
        <option value="1">Number 1</option>
        <option value="2">Number 2</option>
        <option value="3">Number 3</option>
      </select>
    </form>
    <div id="1" class="book">Div number 1</div>
    <div id="2" class="book">Div number 2</div>
    <div id="3" class="book">Div number 3</div>
  </body>
</html>

I draw the values from a database. This is the PHP I use on reload to keep the menu item selected:

<?php
$bookcookie = $_COOKIE['book'];
$book_list = "<select id=\"book_list\">";
while($book = mysql_fetch_array($book_result)){
//THE BOOK LIST
$book_list .= "<option value=\"" . $book['id'] . "\"";
if(isset($bookcookie) && $bookcookie == $book['id']){
    $book_list .= " selected";
}
$book_list .= ">Number " . $book['id'] . "</option>";
}
$book_list .= "</select>";
?>
6
  • There are several problems with the very first sample code, but I'm not sure fixing those is relevant or would get you any closer to your answer. Nov 20, 2011 at 17:26
  • The very first sample code works great. Here is where it is demonstrated: onextrapixel.com/examples/jquery-cookie
    – user791187
    Nov 20, 2011 at 17:30
  • Browsers are forgiving. But that doesn't mean the code is right. ;-) There's an unmatched </p> tag, and there's a misused label (trying to label multiple radio buttons the wrong way). Maybe "several" was an overstatement. Nov 20, 2011 at 17:33
  • Im absolutely game for a more efficient way to do things...new to all of this =) I have found a way to keep the value selected on reload. Is there a way to grab the selected value and open the corresponding div?
    – user791187
    Nov 20, 2011 at 17:38
  • Please post the code that keeps the value on reload -- otherwise we can't help.
    – Hogan
    Nov 20, 2011 at 17:41

1 Answer 1

0

I'm a bit loathe to write too much code; if you can provide a solid attempt, hundreds of people will be happy to help you get that last mile!

I don't mind giving advice, though.

Your initial approach isn't bad at all. Hide all appropriate divs, and then based on change event, show the appropriate one. You just need to insert some new logic:

  • On document ready, check to see if a cookie exists that tells you what div needs to be opened.
  • if the cookie exists, retrieve its value and show the appropriate div
  • if the cooke does not exist, do not open a corresponding div
  • in the change handler, when a user makes a selection, set the cookie and then perform the animation

Hope that helps!

[updated per comments below]

If you want to base it on "selected" being set, you just need to do this:

$(document).ready(function() {
  $('div.book').css("display","none"); // display none on all divs with class 'book'
  var listVal = $('#book_list').val();
  if(listVal != "") {
    $('#book-'+listVal).show();
  }


  $('#book_list').change(function() {
    $('div.book').slideUp("fast"); //Slide Up Effect
    $('#book-' + $(this).val()).slideDown("slow"); //Slide Down Effect
  });
});

Note a change I noticed along the way: your divs can't be just a number; valid IDs must start with a letter, so I added the pattern "book-" to the beginning. I didn't post updated HTML, but your divs will need to have IDs book-1 book-2 and book-3 to use my suggested code.

Not claiming it's optimized, but that's the gist. ;-) If no value is selected, the first one is selected by default, which has a value of empty string. One document ready, get the value and if it's NOT an empty string there must be a div that needs showing. Show it based on the list's value.

3
  • Thanks Greg for the help! Im putting out as much as I can in terms of a solid attempt. I've worked on this thing for the better part of an entire day. Can I ask you to create an example...even if its ignoring what Ive made so far. I get the logic of it...Im just having a hard time makeing the code. Thanks a ton
    – user791187
    Nov 20, 2011 at 18:16
  • Just looked at your revised code. The biggest problem is that you're mixing up server-side and client-side cookies. The jQuery cookies plugin is for the client-side. The checks I mention are all done on the client side. ;-) If you have PHP that's adding a "selected" class, you probably don't need jQuery cookies. I'll have to come back to this later. ;-) Going to re-add the php tag that I deleted, though. Nov 20, 2011 at 18:22
  • The only cookies at this point that are being created are client-side. Upon reload, the cookie is recognized (with PHP) and the "selected" is set to the menu. My thought process was that if the "selected" was set, I could use jquery to see that and make the effect (in this case showing the div).
    – user791187
    Nov 20, 2011 at 18:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.