Apex Code Development You need to sign in to do that
Don't have an account?
Collapse/Expand left panel- urgent Requirement
I have a set of static vf pages .
Creating a Page with left and Right panel.
Trying to achieve this kind of functionality. Left panel should be static (collapse when clicked on category - my personal settings) , when we click on link Appropriate page should appear in right panel.
Quick reply is much appreciated.
<apex:page sidebar="false">
<style type="text/css">
#maindiv {
width:100%;
height:100%;
padding-left:1%;
float:left;
}
#leftPanel {
padding-left:8%;
font-size:18px;
font-weight:bold;
font-family:GE inspira;
color:#33CCFF;
// text-decoration:none;
}
</style>
<apex:form >
<div id="maindiv" >
<apex:pageBlock >
<table width="100%" border="1" >
<tr>
<td width="25%" >
<div id="leftPanel" width="18">
<br/>
<ul>
<apex:pageBlockSection title="title 1" >
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content1" >A</apex:outputLink><br/></li><br/>
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content2" >B</apex:outputLink><br/></li><br/>
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content3" >C</apex:outputLink><br/></li><br/>
<li><apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content4" >D</apex:outputLink><br/></li><br/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Title 2">
<apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content5" >E</apex:outputLink><br/><br/>
<apex:outputLink style="text-decoration:none; color:#33CCFF;" value="/apex/Content6" >F</apex:outputLink><br/><br/>
</apex:pageBlockSection>
</ul>
</div>
</td>
<td >
</td>
</tr>
</table>
</apex:pageBlock>
</div>
</apex:form>
</apex:page>
You got the requirement.. If yes, Please share the workaround I too have same requirement.
Start analyzing Accordion Functionality, i can share snippet i used
<script type="text/javascript">
$(document).ready(function() {
// Collapse everything but the first menu:
$("#VerColMenu > li > a").find("+ ul").slideUp(1);
// Expand or collapse:
$("#VerColMenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
});
function changeimage(img){
var imagepath= img.src;
if(imagepath.indexOf('plus.gif')> -1){
imagepath=imagepath.replace('plus.gif','minus.gif');
}
else{
imagepath=imagepath.replace('minus.gif','plus.gif');
}
img.src=imagepath;
}
function LoadPage(page){
if(page != '')
document.getElementById('content').src=page;
else
document.getElementById('content').src='/apex/yourPage';
}
</script>
<style type="text/css">
#VerColMenu{
margin: 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1;
border-bottom-width: 0;
padding-left: 0;
}
#VerColMenu li{
list-style-type:none;
padding-left: 0;
}
#VerColMenu li a.menuitem{
background: black url({!URLFOR($Resource.urResources, 'img/accordion/glossyback.gif')}) repeat-x bottom left;
font: bold 14px "Arial", "Arial", Arial, Arial, Arial;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
#VerColMenu li a.menuitem:visited, #VerColMenu .menuitem:active{
color: white;
}
#VerColMenu li a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
#VerColMenu li a.menuitem:hover{
background-image: url({!URLFOR($Resource.urResources, 'img/accordion/glossyback2.gif')});
}
#submenu { /*UL of each sub menu*/
background: white;
list-style-type: none;
margin: 0;
padding: 0;
}
#submenu li{
border-bottom: 1px solid blue;
}
#submenu li a{
display: block;
font: normal 12px "Arial", "Arial", Arial, Arial, Arial;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 0;
}
#submenu li a:hover{
background: #DFDCCB;
colorz: white;
}
</style>
<table>
<table width="100%" border="0" >
<tr>
<td valign="left" >
</td>
<td >
<!-- Add Document Image With Folder-->
<td width="20%" align="center">
<font face="Arial" size="3" color="#1975FF"><b> Add Document </b>
<apex:image value="/img/icon/custom51_100/books32.png"/>
</font>
</td>
</td>
</tr>
</table>
<table width="100%" height="100%" border="0">
<tr>
<td width="20%" border="0" valign="top"><br/>
<div >
<ul id="VerColMenu" >
<li><a class="menuitem submenuheader" href="#">Tab1<img id="the Image" src="{!URLFOR($Resource.urResource, "img/accordion/plus.gif")}" class='statusicon' onClick="javascript:changeimage(this)" /></a>
<ul id="submenu">
<li><a href="#" onclick="LoadPage('/apex/page1')">Page1</a></li>
<li><a href="#" onclick="LoadPage('/apex/page2')">page2</a></li>
<li><a href="#" onclick="LoadPage('/apex/page3')">page3</a></li>
</ul>
</li>
<li><a class="menuitem submenuheader" href="#" onclick="LoadPage('/apex/Page4')">Tab2</a></li>
<li><a class="menuitem submenuheader" href="#" onclick="LoadPage('/apex/page5')">tab3</a></li>
<li><a class="menuitem submenuheader" href="#">Tab4<img id="the Image" src="{!URLFOR($Resource.urResources, "img/accordion/plus.gif")}" class='statusicon' onClick="javascript:changeimage(this)" /></a>
<ul id="submenu">
<li><a href="#" onclick="LoadPage('/apex/Page6')">page6</a></li>
<li><a href="#" onclick="LoadPage('/apex/page7')">page7</a></li>
</ul>
</li>
<li><a class="menuitem submenuheader" href="#" onclick="LoadPage('/apex/page8')">page8</a></li>
<li><a class="menuitem submenuheader" href="#">tab5<img id="the Image" src="{!URLFOR($Resource.urResources, "img/accordion/plus.gif")}" class='statusicon' onClick="javascript:changeimage(this)" /></a>
<ul id="submenu">
<li><a href="#" onclick="LoadPage('/apex/page9')">page9</a></li>
<li><a href="#" onclick="LoadPage('/apex/page10')">page10</a></li>
</ul>
</li>
<li><a class="menuitem submenuheader" href="#" onclick="LoadPage('/apex/page11')" style="border-bottom-width: 0" >Last Tab</a></li>
</ul>
</div>
</td>
<td >
<div style="width=100px;">
<br/><apex:iframe src="/apex/HomePage" scrolling="true" id="content" frameborder="false"/>
</div>
</td>
</tr>
</table>
</table>