CQ5 : Could not edit CQ5 Text Component in Hidden container - aem

Question

We are developing a Tab Component in CQ5/AEM. The component contains 3 Tabs and each tab has one CQ5 text component to edit content.
But only the first tab's Text Component is editable as it is shown by default. The other text components which are in hidden tabs content area are not accessible to edit.
Sample code:
<div>
<div>
<div id="tabcnt1">
<div id="tab1" class="tablink">Tab 1</div>
</div>
<div id="tabcnt2">
<div id="tab2" class="tablink">Tab 2</div>
</div>
<div id="tabcnt3">
<div id="tab3" class="tablink">Tab 3</div>
</div>
</div>
<div class="plantabcontent">
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab2" class="plancontent" style="display:none;">
<cq:include path="plandescription2" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab3" class="plancontent" style="display:none;">
<cq:include path="plandescription3" resourceType="libs/foundation/components/text" />
</div>
</div>
Script:
$(document).ready(function(){
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
The 'plandescription1' is visible by default and it is working fine. But the hidden text components are not working while enabling them by changing tabs.
Kindly show me some light. Thanks in advance.

Answer 1

It's important to load the tab components (text component) when loading the page. In case the components are disabled by default the components are not initialized by AEM. So disable the 'hidden' tabs on document.ready instead of using the style="display:none".
In the example I have added the $("div.plancontent:not(:first)").hide(); to disable all tabs except the first.
Example:
<div>
<div>
<div id="tab1" class="tablink">Tab 1</div>
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div>
<div id="tab2" class="tablink">Tab 2</div>
<div id="plancontenttab2" class="plancontent">
<cq:include path="plandescription2" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div >
<div id="tab3" class="tablink">Tab 3</div>
<div id="plancontenttab3" class="plancontent">
<cq:include path="plandescription3" resourceType="/libs/foundation/components/text" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Disable all tabs except first
$("div.plancontent:not(:first)").hide();
//Set clickevent
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
</script>