CSS invisible section on page - display content

Posted on 2011-04-25
Last Modified: 2013-11-18
This is actually best illustrated by my image (attached) but I need to divide the body of a page into two parts, let's say a 30/70 ratio.

The left part would have a drop down list that, when selected, would show the content of the corresponding drop down list.  So if you select "Content A" it would show all the content from "Content A" on the right side of the page.  

Then when you'd select "Content B", "Content A" would disappear and all the content from Contene B would appear and so on. This should illustrate what I typed above
Question by:freezilla
    LVL 16

    Expert Comment

    This code will hide the active page link in your nav.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>Hide Active Page Link in Nav</title>
    		<style type="text/css">
    		<script type="text/javascript"
    		<script type="text/javascript">
    		$("a").live('click', function() {
    		  return false;

    Open in new window

    LVL 16

    Expert Comment

    Now on to the other part. What server technology are you using? (php, cfm, asp)

    Author Comment

    Currently it's all static, so HTML, but it's on a Windows box so I could use Classic ASP if need be.
    LVL 16

    Expert Comment

    You will want to set up your menu as an include and call it from each page. This way, all of your menu content is in one place. The css is pretty basic. I'll give an example in a min.

    Take a look at for information about asp includes.

    Your include will look something like <!--#include file ="yourfile.asp"-->
    LVL 16

    Accepted Solution

    Here ya go, this should be what ya need. EE uploader won't allow .asp for whatever reason, so here's a link.

    Mind you, I don't have an asp box to test on due to my MS allergy. If you want to keep it static, you can, but you're in for a world of pain if it gets big because you will have to change each file (or find and replace.)

    To make it static, remove the <!--#include file ="assets/inc/"--> on line 18 and paste the contents of in it's place. Then change .asp to .htm.

    I would definitely do the server side include.


    Author Closing Comment

    Perfect.  Thank you!
    LVL 16

    Expert Comment

    My pleasure, but I just realized that the js is a bit buggy. Cut the contents of assets/js/add_class_to_active_href and replace with the snippet. This snippet came from
    $(document).ready(function() {
       var pathname = window.location.pathname;
       var pathname = pathname.split('/');
       var tester = pathname[pathname.length-1];
       $('#leftdiv a').each(function(){
           var test = $(this).attr('href');
           if (test == tester){

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Suggested Solutions

    Title # Comments Views Activity
    json example 39 77
    CRM 2011 Error when closing 17 29
    Parse CSS value with RegEx 2 29
    Help with a small Javascript 6 25
    Shoutout to Emily Plummer ( for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now