Changing a page to edit mode using css

Question

I am not to sure if this is completely possible now a days but can i change the view of a page after clicking a button without javascript and using css instead?

I am currently displaying a page with information and once the user clicks the edit button - instead of going to a different page the user will be able to make changes in the same view.

This is how the page will be displayed to the user: jsFiddle of display

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div>Edit button</div>

And this is how the page will look after the user clicks on the edit button: jsFiddle of edit view

<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

So the classes will be hidden until the edit button is clicked then they will be added to the divs

Can i accomplish this with just css and if not what are my alternatives instead of javascript?

Answer 1

Could you do something like this? using the check-box hack its possible to switch to the contenteditable mode

Codepen http://codepen.io/noobskie/pen/gaXqgm?editors=110

The thing is im not sure how you could go about saving it as ive never really worked with content editable im not sure if you can pick the values up dynamically

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

input[type=checkbox]:checked ~ div {
  display: inline;
}

.container {
  display: none;
  position: absolute;
  top: 9px;
  left: 8px;
  right: 8px;
  width: auto;
}

.page {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  text-align: left;
  padding-top: 9px;
  padding-left: 10px;
  height: 25px;
}

.content {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  background-color: white;
  border: 1px solid gray;
  border-radius: 5px;
  font: medium -moz-fixed;
  height: 128px;
  overflow: auto;
  padding: 2px;
  resize: both;
  position: relative;
  bottom: 12px;
}

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<input type="checkbox" id="button" />
<label for="button" onclick>Edit Button</label>

<div class="container">
  <div class="page" contenteditable>living the dream</div>
  <hr/>
  <div class="content" contenteditable>
      <p>Lorem ipsum dolor sit amet...</p>
  </div>
<input type="checkbox" id="button" />
<label for="button" onclick>Save Button</label>
</div>