JSFiddle - React, Tailwind, and code Playground
HTML
<div id='middle'>
<h1>Kassen </h1>
<div class="dotted"></div>
<h2>Doubble click på alt texten for at edit.</h2>
<div id='info'>
<h3>Lidt om os ...</h3>
<p>I udkanten af Roskilde finder du Mettes planteskole. Vi er ikke så store, men vores produkter er altid i top. Du kan besøge os på en af vores åbningsdage, eller du kan foretage en bestilling her på hjemmesiden for senere afhentning.</p>
</div>
<div id='sted'>
<h3> Mettes planteskole </h3>
<p>Industrivej 132</p>
<p>4000 Roskilde</p>
<p>tlf.: 86 54 54 00</p>
<p>info@mettesplanteskole.dk</p>
</div>
<div id='aben'>
<h3>Åbningstider</h3>
<p>Tirsdag <span> 8:00 - 18:00 </span><br></p>
<p> Fredag <span> 8:00 - 19:00 </span><br></p>
<p> Lørdag <span> 8:00 - 16:00 </span><br></p>
<p> Søndag <span> 8:00 - 13:00 </span><br></p>
</div>
</div>
CSS
#middle{
width: 54%;
min-height: 638px;
height: auto;
float: left;
padding: 0% 3%;
}
#middle h1{
float: left;
width: 97%;
color: #8ab512;
font-weight: normal;
font-family: "Trebuchet MS" !important;
}
#middle h2{
color: #8ab512;
font-size: 15pt;
margin: 30px 0px 30px 0px;
font-weight: normal;
font-family: verdana;
}
#middle h3{
color: #8ab512;
font-weight: normal;
font-family: verdana;
font-size: 14pt;
margin: 15px 0px 15px 0px;
}
#aben span{
float: right;
}
#sted{
float: left;
width: 50%;
height: auto;
}
#aben{
float: left;
width: 40%;
height: auto;
}
JavaScript
$(function () {
var bound = $("p").bind( "dblclick", function (event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function (event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
$(document).click(function () {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
currentEle.html(value1234);
});
}