How to do this without using HTML Frames?

Question

I have a requirement like this:

I have three topics and each topic has a set of sub topics. When I click on a topic, sub topics should appear on the right side of the page.

I thought of using frames for this implementation. But as someone suggested to avoid using frames, I’m unable to find a way on how to do it. Is it possible to implement this without using frames and logic within a single page?

Yes. Do it with JavaScript. One solution might be to set the `visibility: hidden` CSS property of each subtopic. — Joe, Sep 19 '15 at 13:34
Ok @Ravi Kumar, I got half of what you asking. Also no code hardly get helped. — divy3993, Sep 19 '15 at 13:34
JavaScript. jQuery makes it easier. Add click handlers to divs. CSS to position the subtopics where you want them. — andrunix, Sep 19 '15 at 13:37

score 5 · Answer 1 · answered Sep 19 '15 at 13:38

You can use Ajax, to easy using Ajax, use jquery library:

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
           $("#topic1").click(function(){
            $('#result').load('topic1.html');
           }); 

           $("#topic2").click(function(){
            $('#result').load('topic2.html');
           });
         });
    </script>
<ul>
    <li><a id="topic1" href="#">Topic 1</a></li>
    <li><a id="topic2" href="#">Topic 2</a></li>
    <li><a id="topic3" href="#">Topic 3</a></li>
</ul>
<div id="result" style="clear:both;">
</div>

You can improve this code by declare an object {link1: page1, link2: page2} then foreach it and write click function for each prop.

@RaviKumar if this helps you, plz click accept this answer :) — yelliver, Sep 20 '15 at 03:31

score 1 · Accepted Answer · answered Sep 19 '15 at 14:12

This is just a demo solution. You may create of your own as per your requirement, it's just to give you the Idea.

JSFiddle : DEMO

$(".topic2, .topic3").fadeOut();
$(".topic1").fadeIn();
$(".row").click(function(){
 var curId = this.id;
    $(".topic1, .topic2, .topic3").fadeOut();
 $("." + curId).fadeIn();
});

.main
{
    display:inline-block;
    width:20%;
    float:left;
    background:#333;
    height:auto;
    margin:0px;
    padding:px;
    color:#eee;
    text-align:center;
}

.row
{
    display:block;
    width:100%;
    height:25px;
    margin:0px;
    padding:10px 0px;
    border-bottom:1px solid black;
    cursor:pointer;
}
.row:hover
{
background:#1C1B1F;
}    

.sub-topics
{
    display:inline-block;
    position:absolute;
    margin: 0px 15px;
    width:65%;
    height:95%;
    overflow:hidden;
}

.topic1, .topic2, .topic3
{
    display:inline-block;
    position:absolute;
    width:100%;
    min-height:100%;
    background:#eee;
    color:black;
    overflow:hidden;
    padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    <div class="row" id="topic1">
        Topic 1
    </div>
    <div class="row" id="topic2">
        Topic 2
    </div>
    <div class="row" id="topic3">
        Topic 3
    </div>
</div>
<span class="sub-topics">
<div class="topic1">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div>
<div class="topic2">
<p>TOPIC 2 ..... Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div>
<div class="topic3">
<p>TOPIC 3 ..... Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
</div>
</span>

Thank you so much for your efforts. The Demo has given a defnite look for my requirement. — Pavan Kumar, Sep 19 '15 at 16:59

How to do this without using HTML Frames?

2 Answers2