title: How to add class in parent div of iframe when you clicked inside that iframe?
body: <p>I have four frame in one page and each iframe has its own content and parent div with some class in it</p>
  
  <p>Below is the screen shot for that page:</p>
  
  <p>Requirements: In Every panel there are some links, when you click on these links its call some other page using AJAX you can see in second image.</p>
  
  <p>Below is HTML Code:</p>
  
  <pre><code>&lt;div class="north-center border"&gt;
      &lt;div class="linksDetails"&gt;
          &lt;div class="panelLinks"&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="javascript:ajaxpage('fxtraders.html', 'panel1');"&gt;FX Traders&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:ajaxpage('fxcharting.html', 'panel1');"&gt;Fx Charting&lt;/a&gt;&lt;/li&gt;
              &lt;!--&lt;li&gt;&lt;a href="javascript:ajaxpage('fxbonds.html', 'panel1');"&gt;FI Inventory (Bonds)&lt;/a&gt;&lt;/li&gt;--&gt;
              &lt;li&gt;&lt;a href="javascript:ajaxpage('fxwatcher.html', 'panel1');"&gt;FX RATE WATCHER&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="open-row-box" id="panel1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Links screen are comming under (linksDetails class) when user click on any link then i m adding new class with name (hidelinks) in this same div and make it display none</p>
  
  <p>So how can i hide my content panel when i clicked on cross icon on top of every panel means when i clicked on that cross icon which is inside iframe i only want to add hidelink class to its parent divs which again hide content div and show this links div again.</p>
  
  <p>i can hide only first panel using this jqyery code but not each panel.</p>
  
  <p>Jquery Code:</p>
  
  <pre><code>    $(window).load(function(){
  
  // Through this i m adding and removing hide links:
  
  $(".panelLinks a").click(function(){
  $(this).parents().eq(2).parent().removeClass("hideLinks");
  $(this).parents().eq(2).parent().addClass("hideLinks");
  });
  
  // Through this i can only add hidelinks class for first panel only not for each panel seperately:
  
  
  $("a.close").on('click', function() {
  $("#mainFrame", window.parent.document).parent().parent().children().removeClass('hideLinks');
  });
  });
  </code></pre>
  
  <p>Main Reqirement:</p>
  
  <p>How can i hide my content panel seperately like when i click on first panel cross icon its hide only first panel, when i click on second panel its hide only second panel like this?</p>
  
  <p>Thanks  in Advance :)</p>