What I'm trying to do:
I use prism.js to display blocks of code. The idea is to be able to also display the visual rendering of this code, in the same window.
What I managed to do:
<button class="flip">See the code</button>
<div class="result"></div>
<div class="code">
<pre class="language-markup"><code class="language-markup"><script class="script" type="text/plain">
....here is my html code...
</script></code></pre>
</div>
As I have many code blocks like this, I thought using each and click functions, something like this :
$('.flip').each(function(){
$(this).on('click',function(){
var code = $(this).next('.code').html();//get the html code from the html block
var result = $(this).next('.result').text(code);// inject it in the result block
$(this).next('.code,.result').toggleClass('hide');// toggle to show code or result..
})
})
But it does nothing. Even If I target the pre tag, code or script tag, using html(), val(), or text() it doesn't work..
Any help would be appreciated..
EDIT: thanks to Swati answer it works. If I want to do the opposite, i.e. first display the visual rendering and then click on the button, the corresponding code, it's possible too. Here is my test :
$(".code").hide();
$('.flip').each(function(){
var code_block = $(this).nextAll('.code:first');
var preview_div = $(this).next('.result');
preview_div.html(code_block.find("code.language-markup").text()); //add your html in result div...
})
$(".flip").click(function() {
var code_block = $(this).nextAll('.code:first');
var preview_div = $(this).next('.result');
//run or show codes..block
if ($(this).text().trim() == "See the code") {
$(this).text('Run Code')
// preview_div.html(code_block.find("code.language-markup").text()); //add your html in result div...
preview_div.show();
code_block.hide();
} else {
$(this).text('See the code')
code_block.show();
preview_div.hide();
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css
" rel="stylesheet">
</head>
<body>
<button class="flip">Run Code</button>
<div class="result"></div>
<div class="code">
<pre class="language-markup">
<code class="language-markup">
<script class="script" type="text/plain">
<img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</script>
</code>
</pre>
</div>
<button class="flip">Run Code</button>
<div class="result">
</div>
<div class="code">
<pre class="language-markup">
<code class="language-markup">
<script class="script" type="text/plain">
<p>XYZ..something <input type="text"/></p>
</script>
</code>
</pre>
</div>
You can get the code block and result div using
nextAll('.code:first')andnext('.result')and depending on the condition show or hide your code or result div.Demo Code :
Other way : You can have same html in your result div as well and whenever you click on the button just toggle divs.