I have the firstname, lastname and a pencil icon beside them on my web page. I need to press to pencil and can change text to another one. Please assist to solve this problem
Here is html
<a class="nav-link left-panel-txt" id="left-panel-txt" href="/profile">
<div class="sb-nav-link-icon"></div>
<span class="dashboard">Firstname Lastname</span><img src="/static/img/pencil.svg" style="width: 5%; height: 5%; margin-left: 10px;">
</a>
Thank you.
This is a demo of what you asked.
There's a label displaying static text Firstname Lastname and when you click on the pencil next to it, you have the opportunity to edit that value until you click again the pencil and the value becomes read only.
I slightly changed your html and added jQuery (since you listed it in your question tags) and Fontawesome to add an icon of a pencil (since otherwise your pencil image wasn't available).
function onToggleClick(event){
if ( $(event.target).hasClass('editing') ){
$(event.target).removeClass('editing');
$(event.target).prev('.dashboard').removeClass('editing');
$('.dashboard').attr('contenteditable', false);
}
else{
$(event.target).addClass('editing');
$(event.target).prev('.dashboard').addClass('editing');
$('.dashboard').attr('contenteditable', true);
}
}
$(document).ready(()=>{
$('.edit_toggle').click(onToggleClick);
});.dashboard{
display: inline-block;
border: solid 1px lightgray;
padding: 2px 5px;
}
.dashboard.editing{
border: solid 1px black;
}
.edit_toggle i{
pointer-events: none;
}
.edit_toggle{
display: inline-block;
width: 5%;
height: 5%;
margin-left: 10px;
border: solid 1px lightgray;
text-align: center;
padding: 2px 2px;
cursor: pointer;
}
.edit_toggle.editing{
background: lightgray;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard">Firstname Lastname</div>
<div class="edit_toggle">
<i class="fa-solid fa-pencil"></i>
</div>