Sidebar navigation and display content on right side

Question

I want to display sidebar navigation(left menu links) and content of each clicked vertical menu display on right side.

For example lets say I have this left menu:

London
New York

If I click on London link the content/page should display on right side and same for New york link.

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
#section {
    width:350px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright © footer.com
</div>

@Pangloss Yes im looking for in pages tabs using html and css Thanks! — Sjay, Oct 09 '15 at 04:24
If you need plain CSS, see [here](http://stackoverflow.com/questions/25943488/how-can-i-make-tabs-with-only-css), but using jQuery is easier, posted. — Stickers, Oct 09 '15 at 12:53

score 8 · Accepted Answer · answered Oct 09 '15 at 12:54

Adjusted the markup slightly for the tabs, and changed IDs to classes for styling:

<div class="header">
     <h1>City Gallery</h1>
</div>
<div class="nav">
    <ul>
        <li><a href="#section-london">London</a></li>
        <li><a href="#section-paris">Paris</a></li>
    </ul>
</div>
<div id="section-london" class="tab-content">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div id="section-paris" class="tab-content">
    <h2>Paris</h2>
    <p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture. Its picturesque 19th-century cityscape is crisscrossed by wide boulevards and the River Seine. </p>
</div>
<div class="footer">Footer</div>

And the jQuery part:

$(document).ready(function () {
    $('.nav ul li:first').addClass('active');
    $('.tab-content:not(:first)').hide();
    $('.nav ul li a').click(function (event) {
        event.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
    });
});

jsfiddle

Thank you very much it improved my code and my requirement fulfilled thanks for ur valuable time and solving my issue Thanks! — Sjay, Oct 10 '15 at 06:25
@Stickers I don't seem to get the same results with the above code. The web page loads but both Paris and London details are displayed. Clicking the links on the left sidebar has no effect. Any suggestions? thanks! — D0uble0, Aug 28 '18 at 15:46
@D0uble0 Check your markup especially for `class="tab-content"`. — Stickers, Aug 31 '18 at 22:45

C. McCarthy · Answer 2 · 2015-10-08T17:38:09.210

1

You want to a href to the text in the side bar to link, to the Paris page when you click Paris and London page when you click London. For example

<a href="london.html">London</a><br>

and

<a href="newyork.html">Paris</a><br>

edited Oct 08 '15 at 17:38

answered Oct 08 '15 at 17:31

C. McCarthy

102
8

Sidebar navigation and display content on right side

2 Answers2