Toggle does not work on the same element that show works on
<p>I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.</p>

<p>While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace <code>show()</code> with <code>toggle()</code>, it does not work and does not return any error.</p>

<p>I was wondering if someone can help me identify the cause of this problem.</p>

<p>My Markup</p>

<pre><code>&lt;div class="option"&gt;    
    &lt;div class="prod-text"&gt;Toy Whistle &lt;/div&gt;
    &lt;div&gt;
        &lt;img class="info-icon" src="Info-icon.png"&gt;
    &lt;/div&gt;
    &lt;div class="option-info" style="display:none;"&gt;
        &lt;div&gt;
            &lt;div class="price-text"&gt;Price: $100&lt;/div&gt;
            &lt;div class="prod-id-text"&gt;Item Number: 231912&lt;/div&gt;
            &lt;div class="quantity-text"&gt;Quantity: 72&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JQuery (does not work)</p>

<pre><code>$(".info-icon").click(function(){
    $(this).parent().parent().find('.option-info').toggle();
});
</code></pre>

<p>JQuery (works!)</p>

<pre><code>$(".info-icon").click(function(){
    $(this).parent().parent().find('.option-info').show();
});
</code></pre>

<p>Many thanks in advance!</p>
