jQuery keep show hide state based on select option

Question

I have drop down select and show hide other fields (within divs) based on option selected in the dropdown list.

This code works fine and show hide based on selection but

Answer 1

Assign an common class to all the div's that holds the content

show hide based on selection but when I load the page all fields are visible

                                        ^
                                        ----- This to target with a single selector

CSS

.content{
   display :none;
}

And in the JS just trigger the change event so as to show the div with option that is selected

$('#row1_layout_options').change(function() {
   $('.content').hide();
   $('#row1_col1_' + $(this).val()).show();
   // Sen d an ajax request to save the value in DB
   $.ajax({

   });
}).change();  <--- Trigger the event

Next is the Page Reload. Web is stateless . So it will not remember the previous state. The only thing you can do is persist the value after page refresh. Maybe in as a cookie, Local Storage or saving it on server and retrieving it back.. Check Fiddle