Question: I have a `div` (1) with `display:block`, another `div` (2) with `display:none` and a third `div` also with `display:none`.

On each click or form submit I want to change the second `div`'s `display` to `block` and the first's to `none`.

Though this can be done with Javascript, I want this change of CSS to stick for the particular session. How can I attain just that?

Answer: 
One (albeit hacky) way to do this using only client side storage is [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage). You could store some value in there, and based on that value set the visibility of the div on page load.

```
/* When the user clicks the form */
sessionStorage.setItem("myValue", "showDiv2");

...    

/* When the page is loaded */
if (sessionStorage.getItem("myValue") === "showDiv2") {
    $('#div2').show();
    $('#div1').hide();
} else {
    $('#div1').show();
    $('#div2').hide();
}

```

There is no way to persistently alter the css source, you can only make modifications to it with javascript after the dom has loaded.
use this

```
$('#formid').submit(function(e){
        $("#2").css('display', 'block');
        $("div#1").css('display', 'none');
    return false;
});

```

<https://jsfiddle.net/mewwt82x/>