Dear Team,
We are facing a unique issue in our CQ5 project. We are using AEM 5.6 to develop our application and we have tab custom component for showing plans.
In Tab Component, We are having three tabs each of them having text components for editable texts. As default, tab1 is showing and the text component can be edited as expected. But the probelm starts when tab 2 get selected.
When Tab2 selected, The Tab1 will be closed and Tab2 get opened, But the Text component of the tab2 content not working. Its just increasing the height then the text editor not opening. The same malfunction happening in Teb3.
But if we limit the Width of the text component within 400px, it works like a gem. The issue seems wierd and we could not proceed anyway. Kindly look into it and give some solution asap.
Herewith I have given the sample code,
HTML - CSS - JS
<div class="tabContaier">
<ul>
<li><a class="active" href="#tab1">Div One</a></li>
<li><a href="#tab2">Div Two</a></li>
<li><a href="#tab3">Div Three</a></li>
</ul><!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents" style="display: block; ">
<div style="width:800px;"><cq:include path="division1" resourceType="/libs/foundation/components/text"/></div>
</div><!-- //tab1 -->
<div id="tab2" class="tabContents" style="display: none; ">
<div style="width:800px;"><cq:include path="division2" resourceType="/libs/foundation/components/text"/></div>
</div><!-- //tab2 -->
<div id="tab3" class="tabContents" style="display: none; ">
<div style="width:800px;"><cq:include path="division3" resourceType="/libs/foundation/components/text"/></div>
</div><!-- //tab3 -->
<!--<div class="button"><button>Select Plan</button></div>-->
</div><!-- //tab Details -->
</div>
<style>
body{
background:#e0e0e0;
font:normal 11px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}
.tabContaier{
background:#f0f0f0;
border:1px solid #fff;
margin:100px auto;
padding:20px;
position:relative;
width:800px;
list-style-type: disc;
}
.tabContaier ul{
overflow:hidden;
border-right:1px solid #fff;
height:35px;
position:absolute;
z-index:100;
margin:0;
padding:0;
list-style-type: disc;
}
.tabContaier li{
float:left;
list-style:none;
}
.tabContaier li a{
background:#ddd;
border:1px solid #fcfcfc;
border-right:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 30px;
text-decoration:none;
text-transform:uppercase;
list-style-type: disc;
}
.tabContaier li a:hover{
background:#eee;
list-style-type: disc;
}
.tabContaier li a.active{
background:#fbfbfb;
border:1px solid #fff;
border-right:0;
color:#333;
list-style-type: disc;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px 0 0;
}
.tabContents{
padding:20px
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 10px;
}
.tabContents p{
padding:0 0 10px;
}
.button
{
text-align:center;
text-decoration:underline;
font-size:12;
}
.l-item .faqques{
color:#009ddb;
font-size:14px;
font-family: 'HelveticaNeueMedium', Arial;
line-height:1.5;
padding-left:15px;
text-align:center;
}
.accord_expand{ background:url(/etc/designs/ngp/pageclientlibs/images/expand.png )40% 50% no-repeat; }
.accord_minimize{background:url(/etc/designs/ngp/pageclientlibs/images/minimize.png )40% 50% no-repeat;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".tabContents").hide(); // Hide all tab content divs by default
$(".tabContents:first").show(); // Show the first div of tab content by default
$(".tabContaier ul li a").click(function(){ //Fire the click event
var activeTab = $(this).attr("href"); // Catch the click link
$(".tabContaier ul li a").removeClass("active"); // Remove pre-highlighted link
$(this).addClass("active"); // set clicked link to highlight state
$(".tabContents").hide(); // hide currently visible tab content div
$(activeTab).fadeIn(); // show the target tab content div by matching clicked link.
return false; //prevent page scrolling on tab click
});
});
$(document).ready(function(){
$("#hide").click(function(){
$(".tabDetails").slideToggle('slow');
if($(this).text() == 'Hide Details')
{
//$(this).text('Show Details');
$(".accord_minimize").removeClass();
$(this).addClass('accord_expand').html('Show Details');
}
else
{
// $(this).text('Hide Details');
$(".accord_expand").removeClass();
$(this).addClass('accord_minimize').html('Hide Details');
}
// $("#hide").html($("#show").html());
// $("#show").html($("#hide").html());
});
});
</script>
Note:
<div style="width:800px;"><cq:include path="division1" resourceType="/libs/foundation/components/text"/></div>
Change the Width to 400px to see it is working fine.
Thanks,
Ranjithkumar S
