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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can have another
divdedicated to showing the preview. Then, when the user switches the HTML view, insert the textarea's value into theinnerHTMLof thedivand 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}