I want to use the text area to switch between HTML code and preview html
When clicked on the HTML, it will show the code for the hidden text area When clicking HTML again it will show
againI want to design something like this
I have tried before
<style>
.container {
width:500px;
position: fixed;
}
.right-element {
background: red;
display: inline-block;
position: absolute;
right: 0;
}
</style>
<div class="container">
<div class="right-element">
Preview
</div>
<textarea id="w3review" name="w3review" style="position:relative;width:100%;height:75%;resize: none; " ><h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3></textarea>
</div>
1
0
0
You can have another div dedicated to showing the preview. Then, when the user switches the HTML view, insert the textarea's value into the innerHTML of the div and display it.
But this may expose your application to XSS attacks, so use it with caution.
$('.right-element').click(function() {
$(this).toggle()
$(this).siblings().toggle()
togglePreview()
})
let showPreview = false
const w3Preview = $('#w3review-preview')
function togglePreview() {
if (!showPreview) {
w3Preview.html(w3review.value)
w3Preview.show()
$(w3review).hide()
} else {
w3Preview.hide()
$(w3review).show()
}
showPreview = !showPreview
}
#html,#w3review-preview{display:none}.container{position:fixed;width:500px}.right-element{background:red;display:inline-block;position:absolute;right:0;z-index:1}
ssscccPreviewHTML
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
