Want jQuery toggle to default to "show" on page refresh

Question

Got an odd one here,

Im using CMS made simple and basically I have a cart. By default it's hidden until someone clicks on the "view my cart" option and the cart slides in using jQuery toggle.

This is actually working fine.

The issue arises when the cart is updated. As its a form structure, you have to make your edits (to qty or 'check' item for removal) then click "update cart". The page refreshes and so the cart hides again.

Is there anyway to make it so that upon clicking this link (specifically), the page refreshes but the cart is showing by default?

Heres my code, I think I could attach a 'class' to the link maybe, but I'm not sure.

<script type="text/javascript" charset="utf-8">
  (function($) {
$('#show_basket').click(function() {
  $('#basket_box').toggle('slow');
  }); 

$('#lclose_basket').click(function() {
    $('#basket_box').hide('slow');
    }); 


$('#continue_shop').click(function() {
    $('#basket_box').hide('slow');
    }); 
$('#continue_shop2').click(function() {
    $('#basket_box').hide('slow');
    }); 
  }(jQuery));

N.B: There is 2 links each as I have a mobile and desktop version of the basket.

ALSO:

How do I make it so the basket closes when I click off of it? Is there a way to do that? At the moment, I need to click a "Continue shopping" link in order to close the basket.

Answer 1

For showing the cart on default, after a refresh you could do something like this:

$(document).ready(function(){  
    $('#basket_box').show('slow'); 
}

If you don't want to trigger this on every site-refresh you can for example add an GET-parameter to your link and check this parameter:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var param = getParameterByName('parameter-name');
if(param){
    //do stuff
}

Note: The function to retrive a parameter by its name can be found here

A second possibility can be, showing the Cart onlick on the link and refreshing the cart-content via AJAX.

$('#refresh_link').click(function() {
  $('#basket_box').show('slow');
  //do ajaxcall -> write callback-data to the cart
   $.ajax({
    url: "pathto/cart.php", /path to your script
    type: "POST",
    data: 'id='+id, // e.g. the ID of the cart or the customer
    success: function (data) {
         //data contains the data you get from "cart.php"
         //you can s.th. like:
         $('div').html(data); // this write the data into a specified div.
    }
    });
  }); 

For futher information about jQuery and Ajax try and read the manual (http://api.jquery.com/jquery.ajax/) or take a look on here: http://www.php4every1.com/tutorials/jquery-ajax-tutorial/

In jQuery you can use most off the CSS-selectors. So you can trigger the click-events you showed in your question when you click e.g. on the div were the cart is displayed:

$('div.cart').click(function(){
    $('#basket_box').hide('slow');
});

I hope I have it got right and this helped you.

Greetings