Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


CSS invisible section on page - display content

Posted on 2011-04-25
Medium Priority
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
  • 5
  • 2
LVL 16

Expert Comment

ID: 35461195
This code will hide the active page link in your nav.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
		<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

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

Author Comment

ID: 35461256
Currently it's all static, so HTML, but it's on a Windows box so I could use Classic ASP if need be.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 16

Expert Comment

ID: 35461301
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 http://www.w3schools.com/asp/asp_incfiles.asp for information about asp includes.

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

Accepted Solution

s8web earned 2000 total points
ID: 35461583
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/menu.inc.asp"--> on line 18 and paste the contents of menu.inc.asp in it's place. Then change .asp to .htm.

I would definitely do the server side include.


Author Closing Comment

ID: 35462094
Perfect.  Thank you!
LVL 16

Expert Comment

ID: 35462248
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 http://www.jessenicola.com/blog/jquery-set-active-links-current-url
$(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


Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

571 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