We Keep Coding

Two Column Accordion with Separate Full Width Divs

The intension is to have a two column accordion, without limiting the "expand" field to the left or right column. The catch is that there will be multiple on one page. This is already created, but only button 1 is working. With the way my JS is going, it will get very very repetitive - I am looking for assistance with re-writing the JS to be multiple click friendly. Fiddle: https://codepen.io/ttattini/pen/abLzaaY
EDIT: It would also be perfect if one dropdown would close as the next is opened
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
<div id="column">
<button id="button">I am Button #1</button>
<button id="button">I am Button #3</button>
</div>
<div id="column">
<button id="button">I am Button #2</button>
<button id="button">I am Button #4</button>
</div>
</div>
<div id="hidden">
<p id="content"> So here I am #1</p>
</div>
<div id="hidden">
<p id="content"> So here I am #2</p>
</div>
<div id="hidden">
<p id="content"> So here I am #3</p>
</div>
<div id="hidden">
<p id="content"> So here I am #4</p>
</div>
CSS
#hidden {
background: #ccc;
margin-top: 2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
#button {
padding: 10px;
margin-top: 5px;
width:50%;
margin-left: 10%;
cursor: pointer;
}
#row {
display: flex;
}
#column {
flex: 50%;
}
JS
$(function() {
var b = $("#button");
var w = $("#hidden");
var l = $("#content");
b.click(function() {
if (w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});

The biggest issue is that you're using IDs when you should be using classes. IDs must be unique to each element in a page. When you repeat an ID, JS will only target the first element using that ID. That's why only the first one is working.
The second issue is that, because of the way the script is written, it will only target a single element. What you need to do is get all the elements you want to target by something like their class name and then loop through them, applying the event listener to each one and its appropriate children.
EDIT: Here is an example from some code I wrote for a page with multiple accordions a few weeks ago in vanilla JS
//Below I establish a counting variable and find all the accordions on the page
const acc = document.getElementsByClassName( 'accordion' );
let i;
//Looping through each accordion
for ( i = 1; i <= acc.length; i++ ) {
//Identify target for the event listener. In this case, a heading for each accordion, which I've numbered e.g. "title-1"
const title = 'title-' + i;
const label = document.getElementById( title );
//Identify target content, in this case a list that has a unique ID e.g. "list-1"
const listNum = 'list-' + i;
const list = document.getElementById( listNum );
//Add event listener to heading that toggles the active classes
label.addEventListener( 'click', function() {
label.classList.toggle( 'accordion--active' );
});
}
Of course, there's more than one way to skin a cat, but this is a working example.

I have tracked the clicked event of each button and showed the corresponding hidden content with the use of data- attribute.
I have used vanilla JavaScipt instead of jQuery.
const buttons = document.querySelectorAll('.button');
const hiddens = document.querySelectorAll('.hidden');
buttons.forEach((btn) => {
btn.addEventListener('click', btnClicked)
function btnClicked(e) {
hiddens.forEach((hidden) => {
if(e.target.dataset.btn == hidden.dataset.content) {
hidden.classList.toggle('height')
} else {
hidden.classList.remove('height')
}
})
}
})
.hidden {
background: #ccc;
margin-top: 2%;
padding-left:2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
.hidden.height {
height: 50px;
}
.button {
padding: 10px;
color: white;
background-color: #2da6b5;
border: none;
margin-top: 5px;
width:90%;
margin-left: 5%;
cursor: pointer;
}
.button:hover {
filter: brightness(.9);
}
#row {
display: flex;
}
.column {
flex: 50%;
}
<div id="row">
<div class="column">
<button class="button" data-btn="one">I am Button #1</button>
<button class="button" data-btn="three">I am Button #3</button>
</div>
<div class="column">
<button class="button" data-btn="two">I am Button #2</button>
<button class="button" data-btn="four">I am Button #4</button>
</div>
</div>
<div class="hidden" data-content="one">
<p class="content"> So here I am #1</p>
</div>
<div class="hidden" data-content="two">
<p class="content"> So here I am #2</p>
</div>
<div class="hidden" data-content="three">
<p class="content"> So here I am #3</p>
</div>
<div class="hidden" data-content="four">
<p class="content"> So here I am #4</p>
</div>
Also, please do not use the same ID at multiple elements.

Switch classes on click next or back

I'm trying to setup multiple-step form in which the first step is visible by default and rest of the steps are hidden with class "hide". I'd like to switch the class with Next and Back button so only one step is visible at a time. Could you please help with this (Already spent an hour on this)
<div class="steps">
<div class="step1">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
$('.next').click(function(){
$('div:not(.hide)').next().removeClass('hide');
$('.hide').prev().removeClass('hide')
})

Try combining the 2 actions into one, like so:
$('.next').click(function(){
$('.steps div:not(.hide)').addClass('hide').next().removeClass('hide');
})
That way, you add the .hide class on your current div and then remove it on the next one.
You can use something similar for the Back button, by replacing .next() with .previous()

$('.next').click(function() {
// find the div that is not hidden
var $current = $('.steps div:not(.hide)');
// only perform logic if there is a proceeding div
if ($current.next().length) {
// show the next div
$current.next().removeClass('hide');
// hide the old current div
$current.addClass('hide')
}
});
$('.back').click(function() {
// find the div that is not hidden
var $current = $('.steps div:not(.hide)');
// only perform logic if there is a preceeding div
if ($current.prev().length) {
// show the previous div
$current.prev().removeClass('hide');
// hide the old current div
$current.addClass('hide')
}
});
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
<div class="step1">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>

You can add a current step variable to track the currently displayed step and two css for styling and showing your content.
jQuery(function($) {
let currentstep = 1;
let maxsteps = 4;
function showstep(step) {
let step_c = '.step' + step;
for (i = 1; i <= maxsteps; i++) {
var step_selector = '.step' + i;
$(step_selector).removeClass('show');
$(step_selector).addClass('hide');
}
$(step_c).removeClass('hide');
$(step_c).addClass('show');
};
$('.next').click(function() {
currentstep = currentstep + 1;
currentstep = (currentstep % (maxsteps + 1));
if (currentstep == 0) currentstep = 1;
showstep(currentstep);
});
$('.back').click(function() {
currentstep = currentstep - 1;
currentstep = (currentstep % (maxsteps + 1));
if (currentstep == 0) currentstep = 4;
showstep(currentstep);
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
<div class="step1 show">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>

I converted Taplar's answer to a jQuery plugin.
You are essentially navigating left or right by one, using the previous and next functions. These functions navigate through the sibling elements.
(function() {
$.fn.moveRight = function(className) {
var $curr = this.find('div:not(.' + className + ')');
if ($curr.next().length) $curr.next().removeClass(className);
else this.find('div:first-child').removeClass(className);
$curr.addClass(className);
return this;
};
$.fn.moveLeft = function(className) {
var $curr = this.find('div:not(.' + className + ')');
if ($curr.prev().length) $curr.prev().removeClass(className);
else this.find('div:last-child').removeClass(className);
$curr.addClass(className);
return this;
};
})(jQuery);
$('.next').on('click', (e) => $('.steps').moveRight('hide'));
$('.back').on('click', (e) => $('.steps').moveLeft('hide'));
.hide {
display: none;
}
.nav {
width: 260px;
text-align: center;
}
.nav .nav-btn::selection { background: transparent; }
.nav .nav-btn::-moz-selection { background: transparent; }
.nav .nav-btn {
display: inline-block;
cursor: pointer;
}
.steps {
width: 260px;
height: 165px;
border: thin solid black;
text-align: center;
line-height: 165px;
font-size: 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
<div class="step1">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="nav">
<div class="nav-btn back">[ << Back ]</div>
<div class="nav-btn next">[ Next >> ]</div>
</div>

Creating a filter bar with Javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am new to Javascript and only have very basic knowledge of it at this stage.
I am trying to create a filter bar that, when clicked, would set the opacity of the non-matched items to 0.2 and the matched item would remain at full opacity.
I have uploaded the html/css to show an example on jsfiddle: https://jsfiddle.net/rebeccasmith1301/zw2aozff/
<div id="filter-bar">
<button onclick="findShoes()">Shoes</button>
<button onclick="findTops()">Tops</button>
<button onclick="findSkirts()">Skirts</button>
</div>
<div class="product-item">
<p>Shoes</p>
</div>
<div class="product-item">
<p>Tops</p>
</div>
Skirts
I have been experimenting with javascript written on a previous post that I found very helpful but due to my basic knowledge I have been unable to solve how to achieve the results I am aiming for.
I basically would like the user to be able to click on the button shoes (for example) and all of the divs that contain the word shoes to remain with full opacity and all other divs to have the class un-selected which lowers the opacity to 0.2. The divs that contain the products can be a class only, not an id as well.
Would anyone be able to help? This would be using mainly vanilla javascript.
Many thanks,
Becky

Fiddle with multiple words: https://jsfiddle.net/qucwvqfr/1/
Fiddle with white space removal: https://jsfiddle.net/d15v3x0w/1/
Don't make a function for each possible variation of content, just make one function and give that a parameter. This javascript would check the textContent of the items, strip the whitespace from them, and change classes accordingly. The hasClass, addClass, and removeClass are helpers, focus on the highlightItems function.
function hasClass(ele,cls) {
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
var highlightItems = function(itemName) {
var p = document.getElementsByClassName("product-item");
for (var i = 0; i < p.length; i++) {
itemText = p[i].textContent.replace(/^\s+|\s+$/g,''); // you don't need the .replace() part if you don't add extra white space in the HTML
if ( !(itemText == itemName) ) {
addClass(p[i], "un-selected");
} else {
removeClass(p[i], "un-selected");
}
}
}
And you would use it like this:
<div id="filter-bar">
<button onclick="highlightItems('Shoes')">Shoes</button>
<button onclick="highlightItems('Tops')">Tops</button>
<button onclick="highlightItems('Skirts')">Skirts</button>
</div>
Note:
If you want to have multiple words inside the box, don't add any unnecessary white space inside the div tags. (You probably shouldn't do it anyway.) So the HTML usage would be like this:
<div class="product-item">Shoes and socks</div>
<div class="product-item">Tops</div>
<div class="product-item">Skirts</div>
Credits for the class-changing functions go to http://jaketrent.com/post/addremove-classes-raw-javascript/

There needs to be a reliable way to select the specified items. I propose that you add a class shoes, tops and skirts to their respective elements:
<div class="product-item shoes">
Shoes
</div>
<div class="product-item tops">
Tops
</div>
<div class="product-item skirts">
Skirts
</div>
Now, to select all elements that got shoes it's really easy:
var shoes = document.getElementsByClassName('shoes');
Selecting elements that don't have a class shoes is another story. Let say we start by collecting out all product-item elements, like so:
var products = document.getElementsByClassName('product-item');
From here on, you need to iterate all the elements inside the returned nodeList and check if they got a shoes class. A helper function that can help you with that:
function not(nodeList, cls){
var reg = new RegExp('\\b' + cls + '\\b');
return Array.prototype.reduce.call(nodeList, function(acc, el){
console.log(el, el.className.search(reg))
if(el.className.match(reg) === null){
acc.push(el);
}
return acc;
}, []);
}
So now, to get products that aren't shoes:
var notShoes = not(products, 'shoes');
To change the opacity of all the elements inside a nodeList we could use another helper function:
function changeOpacity(nodeList, opacity){
Array.prototype.forEach.call(nodeList, function(el){
el.style.opacity = opacity;
});
}
And to use it:
changeOpacity(shoes, 1.0);
changeOpacity(notShoes, 0.2);
All together in this snippet:
function find(cls) {
var clsList = document.getElementsByClassName(cls);
var products = document.getElementsByClassName('product-item');
var notCls = not(products, cls);
changeOpacity(clsList, 1.0);
changeOpacity(notCls, 0.2);
}
function not(nodeList, cls){
var reg = new RegExp('\\b' + cls + '\\b');
return Array.prototype.reduce.call(nodeList, function(acc, el){
console.log(el, el.className.search(reg))
if(el.className.match(reg) === null){
acc.push(el);
}
return acc;
}, []);
}
function changeOpacity(nodeList, opacity){
Array.prototype.forEach.call(nodeList, function(el){
el.style.opacity = opacity;
});
}
/* Styling for filter bar*/
#filter-bar{
width: 100%
}
#filter-bar button{
width: 30%
float: left;
margin: 0.5%;
}
/* Styling for products*/
.product-item{
width: 24%;
float: left;
margin: 0.5%;
background-color: red;
height: 80px;
box-sizing: border-box;
padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
opacity: 0.2;
}
<div id="filter-bar">
<button onclick="find('shoes')">Shoes</button>
<button onclick="find('tops')">Tops</button>
<button onclick="find('skirts')">Skirts</button>
</div>
<div class="product-item shoes">
Shoes
</div>
<div class="product-item tops">
Tops
</div>
<div class="product-item skirts">
Skirts
</div>
<div class="product-item skirts">
Skirts
</div>
<div class="product-item shoes">
Shoes
</div>
<div class="product-item tops">
Tops
</div>
<div class="product-item skirts">
Skirts
</div>
<div class="product-item skirts">
Skirts
</div>

I have a solution with jquery:
HTML
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Tops</button>
<button class="btn" id="b">Skirts</button>
<button class="btn" id="c">Shoes</button>
<!-- An element with an id is needed for the jQuery -->
<div id="parent">
<!-- The base class is the box. Categories are then given as accessory classes. Any div can be in more than one category -->
<div class="box product-item a b">Shoes & Tops</div>
<div class="box product-item a">Tops</div>
<div class="box product-item b">Skirts</div>
<div class="box product-item c">Shoes</div>
</div>
CSS
/* Styling for filter bar*/
#filter-bar{
width: 100%
}
#filter-bar button{
width: 30%
float: left;
margin: 0.5%;
}
/* Styling for products*/
.product-item{
width: 24%;
float: left;
margin: 0.5%;
background-color: red;
height: 80px;
box-sizing: border-box;
padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
opacity: 0.2;
}
jQuery
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#parent > div').fadeIn(450);
} else {
var $el = $('.' + this.id).fadeIn(450);
$('#parent > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
jsfiddle

function filter(me) {
var items = document.getElementsByClassName("product-item");
console.log(me.textContent);
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.style.display = "";
if (item.textContent.trim() !== me.textContent.trim() && me.textContent.trim() !== "All") {
item.style.display = "none";
}
}
}
/* Styling for filter bar*/
#filter-bar{
width: 100%
}
#filter-bar button{
width: 30%
float: left;
margin: 0.5%;
}
/* Styling for products*/
.product-item{
width: 24%;
float: left;
margin: 0.5%;
background-color: red;
height: 80px;
box-sizing: border-box;
padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
opacity: 0.2;
}
<div id="filter-bar">
<button onclick="filter(this)">Shoes</button>
<button onclick="filter(this)">Tops</button>
<button onclick="filter(this)">Skirts</button>
<button onclick="filter(this)">All</button>
</div>
<div class="product-item">
Shoes
</div>
<div class="product-item">
Tops
</div>
<div class="product-item">
Skirts
</div>
<div class="product-item">
Skirts
</div>
<div class="product-item">
Shoes
</div>
<div class="product-item">
Tops
</div>
<div class="product-item">
Skirts
</div>
<div class="product-item">
Skirts
</div>

Jquery accordion type functionality only one item open at a time

I Have a custom designed grid:
http://jsfiddle.net/97n4K/
when you click a grid item the content div of that item slides open and when you click it again it closes. This works fine.
My problem is i only ever want one content area to open at a time much like a standard accordion.
So for instance i click 'content one' - it opens 'content area one' - now if i click 'content two' i want 'content area one' to close (slideUp) and 'content area two' to open (slideDown) at the same time - just like an accordion does.
Obviously my html is alot different from a standard accordion setup so im stuggling to figure it out how to do it with my limited Jquery knowledge.
Please see my Js Fiddle above - and heres the code if you prefer below:
Thanks
HTML
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1"><h3>Content<br>one</h3></div>
<div class="expBtn exOlive ex2"><h3>Content<br>two</h3></div>
<div class="expBtn exOrange ex3"><h3>Content<br>three</h3></div>
</div>
<div class="expArea expArea1">
This is content one
</div>
<div class="expArea expArea2">
This is content two
</div>
<div class="expArea expArea3">
This is content three
</div>
CSS
.expBtn {
width: 190px;
height: 68px;
text-decoration: none;
background-color: #000;
float: left;
cursor: pointer;
}
.expBtn h3 {
font-size: 18px;
font-weight: bold;
color: #e8e7e4;
text-transform: none;
line-height: 1.2em;
letter-spacing: 0em;
padding-top: 13px;
padding-left: 13px;
padding-right: 13px;
padding-bottom: 0;
font-family: arial;
margin: 0;
}
.expArea {
display: none;
width: 570px;
background-color: #ccc;
height: 200px;
}
JS
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
Ok so i have created essentially what i want but i have a massive load of duplicate JS that i know could be simplified by any one with better knowledge of jquery / javascript than me. Please check out this new JS fiddle - any solution to get the JS down would be greatly appreiated!
Thanks
NEW JS FIDDLE
http://jsfiddle.net/97n4K/9/

If you wish to keep your same html structure you can use the following to get what you want;
JS FIDDLE DEMO
Switch your JS click handling to this;
$('.expBtn').on('click', function () {
var area = $(this).index() + 1;
var new_div = $('.expArea' + area);
// do nothing if it's already visible
if (!new_div.is(':visible'))
{
// slide up all first
$('.expArea').slideUp(300);
new_div.slideDown(1000);
}
});
You can easily add more html sections providing you follow the same numbering you've already done.

You can use slideUp or slideDown? Im not 100% sure as to what exactly you want to achieve but this fiddle should help you.
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
$(".expArea1").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea1").slideUp(1000);
});
http://jsfiddle.net/97n4K/5/

Basically you can use a plugin for this and it will help better
I have added some simple code so your code can work
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1" data-accord = "expArea1"><h3>Broadcast + Arts + Media</h3></div>
<div class="expBtn exOlive ex2" data-accord = "expArea2"><h3>Business<br>Services</h3></div>
<div class="expBtn exOrange ex3" data-accord = "expArea3"><h3>Charity +<br>NFP</h3></div>
</div>
<div class="expArea expArea1">
expArea1 content
</div>
<div class="expArea expArea2">
expArea2 content
</div>
<div class="expArea expArea3">
expArea3 content
</div>
Please look at data-accord and it's content
Now for the JS
$('.expBtn').click(function(){
var current = $(this).data('accord');
$('.expArea').each(function(){
if($(this).not('.'+current).css('display') == "block")
{
$(this).slideToggle();
}
});
$('.'+current).slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
You can see it working
http://jsfiddle.net/97n4K/6/
I hope this can help

Block elements are parsed outside their block parents

I am writing a simple little nameplate page and am using multiple paragraphs hidden and shown with javascript to get all the sections in one document.
Here is my html:
<header>
<h1><span>Scott Colby</span></h1>
<nav>
<div id="twitternav">Twitter</div>
<div id="tumblrnav">Tumblr</div>
<div id="flickrnav">Flickr</div>
<div id="facebooknav">Facebook</div>
<div id="linksnav">Links</div>
<div id="aboutnav" class="active">About Me</div>
</nav>
</header>
<div id="content">
<p id="twitter">
Placeholder text for Twitter
</p>
<p id="tumblr">
Placeholder text for Tumblr
</p>
<p id="flickr">
Placeholder text for Tumblr
</p>
<p id="facebook">
Placeholder text for Tumblr
</p>
<p id="links">
Placeholder text for Links
</p>
<p id="about" class="active">
<div id="portrait"><img src="img/portrait.jpg" width="188" height="221" alt="-----" /><br /><span class="credit">Image: © 2011 Jim Thomas</span></div>
<div>Placeholder text for About Me</div>
</p>
</div>
My CSS:
nav {
color: white;
margin: 0 5px -8px 0;
text-align: right;
z-index: 1;
}
nav div{
display: inline;
margin: 0 0 0 .9em;
padding: .25em .25em .25em .25em;
z-index: 1;
}
nav div:hover {
background: #F77D00;
}
nav div.active {
background: #FF9900;
}
#content p {
display: none;
font-size: 85%;
z-index: -1;
}
#content p.active {
display: block;
}
And my javascript:
function hideAll() {
document.getElementById('twitter').className = '';
document.getElementById('twitternav').className = '';
document.getElementById('tumblr').className = '';
document.getElementById('tumblrnav').className = '';
document.getElementById('flickr').className = '';
document.getElementById('flickrnav').className = '';
document.getElementById('facebook').className = '';
document.getElementById('facebooknav').className = '';
document.getElementById('links').className = '';
document.getElementById('linksnav').className = '';
document.getElementById('about').className = '';
document.getElementById('aboutnav').className = '';
}
function showTwitter() {
hideAll();
document.getElementById('twitter').className = 'active';
document.getElementById('twitternav').className = 'active';
}
function showTumblr() {
hideAll();
document.getElementById('tumblr').className = 'active';
document.getElementById('tumblrnav').className = 'active';
}
function showFlickr() {
hideAll();
document.getElementById('flickr').className = 'active';
document.getElementById('flickrnav').className = 'active';
}
function showFacebook() {
hideAll();
document.getElementById('facebook').className = 'active';
document.getElementById('facebooknav').className = 'active';
}
function showLinks() {
hideAll();
document.getElementById('links').className = 'active';
document.getElementById('linksnav').className = 'active';
}
function showAbout() {
hideAll();
document.getElementById('about').className = 'active';
document.getElementById('aboutnav').className = 'active';
}
Now, I know that's a lot of code to go through, but it's pretty simple stuff I think.
Here is my problem: even when the #about p is not active and has display:none (i.e. another section is active and visible), the image and the div with "Placeholder text for About" are both visible. When I investigated this in firebug, it shows something like this:
<p id="about"> </p>
<div id="portrait"><img .... /></div>
<div>Placeholder text for About</div>
Why do the two div's migrate outside their parent element? How can I make them disappear along with their parent?

The <p> element does not allow block level elements like <div> inside it. When the HTML parser sees the <div> tag, it assumes that the </p> tag has been omitted (it's optional) and that the p element is complete. Hence the DOM you see with the div elements as following siblings of the p element.
Tip: It's always a good idea to validate your HTML before posting a question on SO. Had you done so, the validator would have indicated the error to you.