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 in image) , 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>