title: JQuery show hidden content to a particular div on click on li element
body: <p>I have some question regarding showing hidden content in a particular place regarding the context.</p>
  
  <p>So I have here this layout:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div style="display:table; margin:auto; width:470px; height:470px; border:1px dashed;"&gt;
          &lt;br /&gt;
          &lt;div id="ShowPhotoContext" style="margin:auto;"&gt;
           Here should come hidden content from li element
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;
  
      &lt;div id="slider1" style="margin:auto;"&gt;
          &lt;div class="thumbelina-but horiz left"&gt;&amp;#706;&lt;/div&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt; Click me                                        
                      &lt;div class="caption" id="comment_id1" style="display:none;"&gt;
                          &lt;p&gt;Some comments to display&lt;/p&gt;
                          &lt;div class="btn-group"&gt;
                              &lt;ul class="dropdown-menu" role="menu"&gt;
                                  &lt;li&gt; First menu &lt;/li&gt;
                                  &lt;li&gt; Second menu &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;div class="thumbelina-but horiz right"&gt;&amp;#707;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I have here a list of menu "Click me" when you click on this li element, the hidden content in li, caption should be made visible in the ShowPhotoContext div above.</p>
  
  <p>How can I do that with JQuery?</p>