Develop Reference

Get child div content if class exists on parent

I have a module where, on hover, I want the content on the right to change (stuff in the blue div in the demo below).
To achieve this, what I'm trying to do is:
If class .active exists on li.tabs then, get the .content from it and display it in the .overview div.
But unsure on how I can get .content when class .active exists in .overview?
I have the following markup (simplified):
// 1. Check if li has class active
if ($('li.tabs').hasClass('active')) {
// 2. get .content div from li where class .active exists
}
.tabs{
border: 1px solid yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content d-none"><p>content</p></div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none"><p>content 2</p></div>
</li>
</div>
<div class="overview"> </div>
</div>

Complete code for your, together with active class toggle:
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
}).on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs {
border: 1px solid yellow;
}
.tabs.active {
background: none yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs">
<div class="header"><span>Header</span></div>
<div class="content d-none">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none">
<p>Content 2</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
Also on JSFiddle

You can select a children by letting a space between the selectors (in JQuery):
$(".li.tabs.active .content")
will select all the content whom parents have the active class

Show and hide child div as per the condition

This code I written for to show child category when clicking on the parent category. And it working good.
$(function(){
$(".class1-parrent").on("click",function(){
$(".after-class").css("display","none");
$('.class1-child').appendTo('.after-4');
$(".after-4").css("display","flex");
$(".common-child-class").css("display","none");
$(".class1-child").css("display","block");
});
$(".class2-parrent").on("click",function(){
$(".after-class").css("display","none");
$('.class2-child').appendTo('.after-4');
$(".after-4").css("display","flex");
$(".common-child-class").css("display","none");
$(".class2-child").css("display","block");
});
});
.after-4, .after-5 {
border: 1px solid black;
display:none;
width:100%;
}
.common-parrent-class {
border:1px solid black;
margin:2px;
float:left;
width:20%;
cursor:pointer;
}
.main, .sub-category {
display: inline-table;
padding:22px;
border:1px solid black;
}
.sub-category {
margin-top:10%;
display:none;
width:100%;
}
.common-child-class {
display:none;
width:100%;
}
.inner {
float:left;
width:24%;
margin:2px;
}
#media screen and (max-width: 299px) and (min-width:200px){
.common-parrent-class, .inner {
width:60%;
}
}
#media screen and (max-width: 420px) and (min-width:300px){
.common-parrent-class, .inner {
width:40%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 main">
<div class="main-category">
<div class="class1-parrent common-parrent-class">Class1</div>
<div class="class2-parrent common-parrent-class">Class2</div>
<div class="class3-parrent common-parrent-class">Class3</div>
<div class="class4-parrent common-parrent-class">Class4</div>
<div class="after-4 after-class"></div>
<div class="class5-parrent common-parrent-class">Class5</div>
<div class="after-5 after-class"></div>
</div>
<div class="sub-category">
<div class="class1-child common-child-class">
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
</div>
<div class="class2-child common-child-class">
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
</div>
</div>
</div>
</div>
</div>
Here I only write code for class1 and class2.
What I need is when we click parent category(class) then
(1) Show it's child category & after-class if child category not
displayed
(2)Hide it's child category & after-class if it is already
How to do this ?

Here is the jsfiddle for solution:
Demo
You can write like this to show and hide.
Edit : To hide after class then modify the code to this
if(status == 'none'){
$('.'+$child).appendTo('.after-4');
$(".after-4").css("display","flex");
$(".common-child-class").css("display","none");
$('.'+$child).css("display","block");
}
if(status == 'block'){
$(".after-4").css("display","none");
}

Here is the solution. Add the given jquery.
$(".class3-parrent").on("click",function(e){
$(".common-child-class").hide();
$(".after-4.after-class").hide();
});
Working DEMO!!!

Use the toggle(), I have done a basic sample. You can do the styling and aligment part.
$(function(){
$(".class1-parrent").on("click",function(){
//$(".after-class").css("display","none");
//$('.class1-child').appendTo('.after-4');
//$(".after-4").css("display","flex");
//$(".common-child-class").css("display","none");
//$(".class1-child").css("display","block");
//$('.class1-child common-child-class').toggle('show');
//$(".common-child-class").css("display","none");
$(".class1-child").toggle('hide')
});
$(".class2-parrent").on("click",function(){
//$(".after-class").css("display","none");
//$('.class2-child').appendTo('.after-4');
//$(".after-4").css("display","flex");
//$(".common-child-class").css("display","none");
//$(".class2-child").css("display","block");
$(".class2-child").toggle('hide')
});
});
.after-4, .after-5{
border: 1px solid black;
display:none;
width:100%;
}
.common-parrent-class{
border:1px solid black;
margin:2px;
float:left;
width:20%;
cursor:pointer;
}
.main, .sub-category{
display: inline-table;
padding:22px;
border:1px solid black;
}
.sub-category{
margin-top:10%;
display:none;
width:100%;
}
.common-child-class{
display:none;
width:100%;
}
.inner{
float:left;
width:24%;
margin:2px;
}
#media screen and (max-width: 299px) and (min-width:200px)
{
.common-parrent-class, .inner{
width:60%;
}
}
#media screen and (max-width: 420px) and (min-width:300px)
{
.common-parrent-class, .inner{
width:40%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 main">
<div class="main-category">
<div class="class1-parrent common-parrent-class">Class1</div>
<div class="class1-child common-child-class" >
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
<div class="class1-child-inner inner">Class 1</div>
</div>
<div class="class2-parrent common-parrent-class">Class2</div>
<div class="class2-child common-child-class">
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
<div class="class2-child-inner inner">Class 2</div>
</div>
<div class="class3-parrent common-parrent-class">Class3</div>
<div class="class4-parrent common-parrent-class">Class4</div>
<div class="after-4 after-class"></div>
<div class="class5-parrent common-parrent-class">Class5</div>
<div class="after-5 after-class"></div>
</div>
<div class="sub-category">
</div>
</div>
</div>
</div>

How to fix this toggle div using jQuery?

If you will run the web snippet, and will click the minimize button ( - ), all of the panels are going to hide.
I want that if I am going to click the Minimize button from Handle 1, the handle 1 content will only disappear.
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
.minimize{
float:right;
font-weight: bolder;
cursor: pointer;
padding: 0 5px;
}
.ui-sortable-handle{
min-height: 20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1 <button class="minimize">-</button></h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$('.dragbox-content').toggle();
});
</script>
</body>
</html>

$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
.minimize{
float:right;
font-weight: bolder;
cursor: pointer;
padding: 0 5px;
}
.ui-sortable-handle{
min-height: 20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1 <button class="minimize">-</button></h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$(this).parent().closest('.dragbox').find('.dragbox-content').toggle();
});
</script>
</body>
</html>

You can get the closest parent (dragbox) of the link clicked (minimize) and then find dragbox-content inside that parent only.
$(".minimize").click(function() {
$(this).text('+');
$(this).closest('.dragbox').find('.dragbox-content').toggle();
});

.next() will help you to toggle the next div on the element you clicked
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
$('.dragbox h2').click(function(){
$(this).next('.dragbox-content').toggle();
});
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
.minimize{
float:right;
font-weight: bolder;
cursor: pointer;
padding: 0 5px;
}
.ui-sortable-handle{
min-height: 20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1 <button class="minimize">-</button></h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$('.dragbox-content').toggle();
});
</script>
</body>
</html>

Try targeting the item that was clicked with this:
$(".minimize").click(function(){
$(this).text('+');
$(this).parents('.dragbox-content').first().toggle();
});

Javascript keeps a div hidden until you click a button, need help modifying

Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more..
I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}

You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
This is a link<br><br>
About
</p>

I don't understand your question properly. But if you are trying to make different div elements visible upon clicking different links, then this is what you should do:
<div id = "anchor-div">
<ul>
<li> <a id="about-anchor" href="javascript:;"> About</a> </li>
<li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
</ul>
</div>
<div id="content-div">
<div id="about-content"></div>
<div id="help-content"></div>
</div>
$(document).ready(function(){
//if you wish to keep both the divs hidden by default then dont forget to hide //them
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#help-content").show();
$("#about-content").hide();
});
});
Also don't forget to add jQuery library.

CSS/Javascript modal dialog not appearing on click

I following this simple tutorial to build a modal dialog
index.html
<div id="results">
<div id="resultsListing">
<ol class="results">
<li class="place clearfix">
<div class="dish-result">
<div class="header clearfix">
<a href=
"javascript:void(0)" class="place-name"></a>
</div>
</div>
</li>
</ol>
</div>
</div>
(etc...)
<div id="overlay">
<div id="dish-popup-container">
<div id="dish-popup" class="popup">
<div class="dish clearfix">
<div class="header"></div>
<div class="details">
<div class="like-button">
<a href="#" class="button">/* this should replaced with dynamic content
*/</a><span class="counter-b">0</span>
</div>
</div>x
</div>
</div>
</div>
</div>
searchui.js
function onPlaceClicked(place_id, dish_id, serp) {
var place = placesById[place_id];
var dish = getDishById(place, dish_id);
var dict = {
place:place,
dish:dish,
topDish:dish,
serp:serp
};
changeState({place:place_id, dish:dish_id});
$(document).trigger('placeClicked', [dict]);
}
function popupPlace(dict) {
$('div#dish-popup').render(dict,window.dishPopupTemplate);
if(typeof(dict.dish) === 'undefined') {
$('div#dish-popup').addClass('place-only');
} else {
$('div#dish-popup').removeClass('place-only');
}
$('#overlay').show();
showPopupMap(dict.place, "dish-popup-map");
}
I'm not sure if this part was necessary but included it anyway:
custom.js
/* Modal Dialog */
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
CSS:
/* =Overlay
-------------------------------------------------------------- */
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay #dish-popup {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
Now when I click a .place list item. The #overlay div doesn't show up.
What could be the cause of this?