Change page for editing in css mode

Question

I'm not sure if this is possible now completely, but can I change the page view after clicking the button without javascript and use css instead?

Currently, I am showing a page with information and as soon as the user clicks the edit button, instead of going to another page, the user will be able to make changes in the same view.

Thus, 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 view view

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

Thus, the classes will be hidden until you click the edit button, after which they will be added to the divs

Can I accomplish this with only css, and if not my alternatives instead of javascript?

Answer 1

Could you do something like this? using a flash drive, you can switch to contenteditable mode

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

The fact is, I'm not sure how you could save it, since ive never worked with editable content, I'm not sure that you can dynamically select values

 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>