JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<a href="#" onclick="$('#a').toggle(); return false;">Classic Way</a>
<a href="#" onclick="$('#b').toggle(); return false;">jQuery Compatible Way #1</a>
<a href="#" onclick="$('#c').toggleClass('hide'); return false;">jQuery Compatible Way #2</a>

<div id="a">Classic Way</div>
<div id="b">jQuery Compatible Way #1</div>
<div id="c">jQuery Compatible Way #2</div>

<hr />

<h3>What is this fiddle about?</h3>
<p>Generally, in this case, what happens is, when you declare <code>display: none;</code> in the CSS rules, and then use jQuery to <code>.hide()</code> or <code>.show()</code> the <code>&lt;div&gt;</code>, it doesn't work in the first attempt. My advice is you can use it in two ways:</p>

<ol>
<li>By defining a class <code>class="hide"</code> and then toggling the class. i.e., <code>.toggleClass("hide")</code>.</li>
<li>By hiding the <code>div</code> using <code>.hide()</code> method on <code>$(document).ready();</code>.</li>
</ol>

<p>This is a bug / feature of jQuery / JavaScript. So this is the best way to deal it. If there's no <code>display: none</code> in the <code>style</code> attribute of a element, jQuery simply treats it as visible. I can show you a fiddle demonstrating it.</p>

CSS

body {font-family: Segoe UI, sans-serif;}
a {margin: 5px; text-decoration: none;}
a:hover {color: #f00; text-decoration: underline;}
div {margin: 15px; border: 1px solid #ccc; padding: 10px;}
hr {margin: 20px 0;}
#a, .hide {display: none;}

JavaScript

$(document).ready(function(){
    // Hide 
    $("#b").hide();
    $("#c").addClass("hide");
});