To briefly describe the intended design: I want a nav menu that, on hover, reveals content. But I am also seeking flexibility and simplicity. Because each nav element behaves in an identical way, I imagine that the javascript and css can be written once with variables that identify each nav element. So far, I have taken a number of different approaches, but the following has worked best for me. Admittedly, it is painfully redundant:
<div id="leftColumn">
<div id="nav1"
onmouseover="
document.getElementById('nav1').style.backgroundColor = 'black';
document.getElementById('nav1').style.color = 'white';
document.getElementById('content1').style.display = 'block';"
onmouseout="
document.getElementById('content1').style.display = 'none';
document.getElementById('nav1').style.color = 'black';
document.getElementById('nav1').style.backgroundColor = 'white';">
DECONSTRUCTIONS
</div>
<div id="nav2"
onmouseover="
document.getElementById('nav2').style.backgroundColor = 'black';
document.getElementById('nav2').style.color = 'white';
document.getElementById('content2').style.display = 'block';"
onmouseout="
document.getElementById('content2').style.display = 'none';
document.getElementById('nav2').style.color = 'black';
document.getElementById('nav2').style.backgroundColor = 'white';">
CONSTRUCTIONS
</div>
<div id="nav3"
onmouseover="
document.getElementById('nav3').style.backgroundColor = 'black';
document.getElementById('nav3').style.color = 'white';
document.getElementById('content3').style.display = 'block';"
onmouseout="
document.getElementById('content3').style.display = 'none';
document.getElementById('nav3').style.color = 'black';
document.getElementById('nav3').style.backgroundColor = 'white';">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
And the relevant (also redundant) CSS:
#nav1 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav2 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav3 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1 {display:none;}
#content2 {display:none;}
#content3 {display:none;}
To reiterate, I want to keep everything as simple as possible, but flexible for future editing - for adding future nav elements and corresponding content. I have searched for solutions and tried other approaches, but each time the javascript/jQuery quickly becomes complicated and beyond my abilities to understand and modify to my liking. Any tips, advice, solutions, explanations, resources... will be much appreciated. Thanks!
You can create two separte functions for mouseover and mouseout event, and can add the naviagtion menu in html, as many as you want.
Here is the complete solution for you.
<html>
<style type="text/css">
/*we can combine the selectors with comman if same css values available for all*/
#nav1, #nav2, #nav3{padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1, #content2, #content3 {display:none;}
</style>
<script>
function displayContent(div, contentId){
/*div is reffering the current mouseovered div*/
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}
function hideContent(div, contentId){
document.getElementById(contentId).style.display = 'none';
div.style.color = 'black';
div.style.backgroundColor = 'white';
}
</script>
<body>
<div id="leftColumn">
<div id="nav1" onmouseover="displayContent(this, 'content1')" onmouseout="hideContent(this, 'content1')">
DECONSTRUCTIONS
</div>
<div id="nav2" onmouseover="displayContent(this, 'content2')" onmouseout="hideContent(this, 'content2')">
CONSTRUCTIONS
</div>
</body>
<div id="nav3" onmouseover="displayContent(this, 'content3')" onmouseout="hideContent(this, 'content3')">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
</html>
Instead Of java script to change color.CSS have the property :hover to change when hover happens on some element and for onmouseover and onmouseout pass the function with arguments so to display and hide contents.I have attached the complete code for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#nav1 {
padding-left:25px;
width:200px;
line-height:150%;
background-color:white;
}
#nav2 {
padding-left:25px;
width:200px;
line-height:150%;
background-color:white;
}
#nav3 {
padding-left:25px;
width:200px;
line-height:150%;
background-color:white;
}
#content1 {
display:none;
}
#content2 {
display:none;
}
#content3 {
display:none;
}
CSS for hover to change color
#nav1:hover, #nav2:hover, #nav3:hover {
background:black;
color:white;
}
</style>
JavaScript
<script>
function display(contentID) {
document.getElementById(contentID).style.display = 'block';
}
function hide(contentID) {
document.getElementById(contentID).style.display = 'none';
}
</script>
</head>
<body>
<div id="leftColumn">
<div id="nav1" onmouseover="display('content1')" onmouseout="
hide('content1');
">DECONSTRUCTIONS</div>
<div id="nav2" onmouseover="display('content2')" onmouseout="
hide('content2');
">CONSTRUCTIONS</div>
<div id="nav3" onmouseover="display('content3')" onmouseout="
hide('content3');
">OBSERVATIONS</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
</body>
</html>
Related
I am trying to create a testimonial section on a wordpress site where there is an "expand" button to show the full testimonial quote. I want the text in the button to change to "collapse" after it is clicked. I also need to add a class to the div wraper so I can implement custom css styling when the button is active. I need this pasted three times. The problem is it fails after the first testimonial.
I have this working with the code below, with it duplicated three times (for three different testimonials) and it works on a basic html document. But when I implement it in a wordpress site by pasting the code, only the first testimonial totally works. The other two do show/hide my inner div element, but they won't insert the .active class or change the text of the button to "collapse"
Both of the second testimonials give a
"Uncaught TypeError: Cannot set property 'innerHTML' of null" in the console.
So for example, here are two out of three of my testimonials I want to show. I have to change the ID's on them to avoid the javascript conflict.
function showhide() {
var content = document.getElementById('hidden-content');
var wrap = document.getElementById('testimonial-wrap');
var btn = document.getElementById('button1');
if (content.style.display === 'none') {
content.style.display = 'block';
wrap.style.background = 'grey';
btn.innerHTML = 'COLLAPSE';
wrap.classList.add('active');
} else {
content.style.display = 'none';
wrap.style.background = 'white';
btn.innerHTML = 'EXPAND';
wrap.classList.remove('active');
}
}
function showhide2() {
var content2 = document.getElementById('hidden-content2');
var wrap2 = document.getElementById('testimonial-wrap2');
var btn2 = document.getElementById('button2');
if (content2.style.display === 'none') {
content2.style.display = 'block';
wrap2.style.background = 'grey';
btn2.innerHTML = 'COLLAPSE';
wrap2.classList.add('active');
} else {
content2.style.display = 'none';
wrap2.style.background = 'white';
btn2.innerHTML = 'EXPAND';
wrap2.classList.remove('active');
}
}
<div id="testimonial-wrap" style="background-color: white;">
<div id="testimonial">
above testimonial content
<div id="hidden-content" style="display: none;">
<p>"hidden content”</p>
</div>
<button id="button1" onclick="showhide()">EXPAND</button>
</div>
</div>
<div id="testimonial-wrap2" style="background-color: white;">
<div id="testimonial">
above testimonial content
<div id="hidden-content2" style="display: none;">
<p>"hidden content.”</p>
</div>
<button id="button2" onclick="showhide2()">EXPAND</button>
</div>
</div>
I think this is what you're looking for. You can do it much easier with jQuery & a small amout of code.
I didn't use display: none as I want to add the transition to the action. (transition won't work with display: none)
$(document).ready(function() {
$(".toggle-button").on("click", function() {
$(this).closest(".testimonial-wrap").toggleClass("active");
});
});
.testimonial-wrap {
background-color: #C1C1C1;
padding: 5px;
margin-bottom: 10px;
}
.testimonial-wrap.active {
background-color: #0095FF
}
.hidden-content {
height: 0px;
visibility: hidden;
transition: all 0.5s ease-out;
}
.active .hidden-content {
height: 100px;
visibility: visible;
transition: all 0.5s ease-in;
background-color: rgba(0, 0, 0, 0.5);
}
button {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-wrap">
<div id="testimonial">
<p>above testimonial content</p>
<div class="hidden-content">
<p>"hidden content”</p>
</div>
<button id="button1" class="toggle-button">EXPAND</button>
</div>
</div>
<div class="testimonial-wrap">
<div id="testimonial">
<p>above testimonial content</p>
<div class="hidden-content">
<p>"hidden content.”</p>
</div>
<button id="button2" class="toggle-button">EXPAND</button>
</div>
</div>
I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?
https://codepen.io/EpicTriffid/pen/WOYrzg
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").animate({opacity:0});
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$("#cross1").fadeOut('fast');
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
};
};
});
You are emptying the HTML of .button1 when you do:
$(".button1").html(....
In order to get it back, you need to add:
$(".button1").html('<div class="b1text">Random</div>');
after
$('.randframe').remove();
Your button is missing the text Random
When you call:
$(".button1").html(...
you are replacing the inside html of the object with the iframe.
When you remove .randframe you need then re-add the text for your button.
Instead of:
$('.randframe').remove()
you can call this which will accomplish both:
$('.button1').html('random');
Efficiency tip: You did a good job of saving references to your jquery variables but and cross, why not use them?
but.html(...
cross.click(function (){...
This line effectively replaces whatever you have in the button 1 div
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
Your cross1.click function does not re-populate the button1 div, I would recommend
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$('.button1').html('Random');
$("#cross1").fadeOut('fast');
$(".b1text").animate({opacity:"1"});
});
Here you go with the solution https://codepen.io/Shiladitya/pen/WOLNpw
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").fadeOut();
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
but.removeAttr('style');
cross.fadeOut('fast');
$('.randframe').remove();
but.html('<div class="b1text">Random</div>');
});
};
};
});
//Search Button
var but2 = "closed"
$(".button2").click(function () {
var but = $(".button2");
var btext = $(".b2text");
var cross = $("#cross2");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
btext.fadeOut();
cross.delay(2000).fadeIn()
but2 = "open"
$("#cross2").click(function() {
$('.button2').removeAttr('style');
$('.b2text').fadeIn(1500);
$("#cross2").fadeOut('fast');
})
})
});
#spacer {
margin:0;
padding:0;
height:50px;
}
body {
min-height: 100%;
min-width: 1024px;
width:100%;
margin-top:4em;
padding:0;
background-color: teal;
}
h1 {
color:white;
font-family:"cabin";
text-align:center;
}
#cross1 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: left;
display:none;
}
#cross2 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: right;
display:none;
}
#randframe {
display:none;
}
.button1 {
position:absolute;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
.button2 {
position:absolute;
right:0;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Wiki Viewer</h1>
</div>
</div>
</div>
<div id="spacer"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="button1">
<div class="b1text">Random</div>
</div>
<div class="button2">
<div class="b2text">Search</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<i id="cross1" class="glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="col-xs-12">
<div class="text-center">
<i id="cross2" class="glyphicon glyphicon-remove"></i>
</div>
</div>
You need to keep the content inside the ".button1" to reuse after the iframe is removed.
Try using callbacks. So change your #cross1 fadout to
$("#cross1").fadeOut('fast',function(){
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
Also, this may not be affecting your code, but you're missing some semi colons after some variable declarations.
Not all methods have callbacks in JQuery, but when available, they are useful because basically it means that your code is not fired until the other thing is completely done. This happens a lot with fading and opacity.
This is the code I'm using to create an application page. It works perfectly fine offline when running it as a .html file through FireFox, but doesn't work when I upload it to WordPress.
I believe the Javascript is not being executed onclick, but I cannot find fault within it.
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {width: 100%;
border: black 1px solid;}
.mItem {width: 14%;
float: left;
border: white 1px solid;
height: 60px;
color: #ffffff;
background-color: #dddddd;
text-align: center;
vertical-align: middle;
line-height: 60px;
display:block;
}
#mItem1 {background-color: #FFA500;}
.EFcontent{
width: 100%;
color: black;
}
.contentwrap {width: 100%;}
#view1 {display: block;}
#view2 {display: none;}
#view3 {display: none;}
#view4 {display: none;}
#view5 {display: none;}
#view6 {display: none;}
#view7 {display: none;}
</style>
</head>
<body>
<div class="wrapper">
<div class="path">
<div id="mItem1" class="mItem">Student Details</div>
<div id="mItem2" class="mItem">Employer Details</div>
<div id="mItem3" class="mItem">Employment Details</div>
<div id="mItem4" class="mItem">Education History</div>
<div id="mItem5" class="mItem">Nationality</div>
<div id="mItem6" class="mItem">Disability</div>
<div id="mItem7" class="mItem">General</div>
</div>
<br>
<div class="contentwrap">
<div id="view1" class="EFcontent">
<h3>Student Details</h3>
<a onclick="page2()" href="#2">Next</a>
</div>
<div id="view2" class="EFcontent">
<p>content2</p>
<a onclick="page1()" href="#2">Back</a>
<a onclick="page3()" href="#3">Next</a>
</div>
<div id="view3" class="EFcontent">
<p>content3</p>
<a onclick="page2()" href="#3">Back</a>
<a onclick="page4()" href="#4">Next</a>
</div>
<div id="view4" class="EFcontent">
<p>content4</p>
<a onclick="page3()" href="#4">Back</a>
<a onclick="page5()" href="#5">Next</a>
</div>
<div id="view5" class="EFcontent">
<p>content5</p>
<a onclick="page4()" href="#5">Back</a>
<a onclick="page6()" href="#6">Next</a>
</div>
<div id="view6" class="EFcontent">
<p>content6</p>
<a onclick="page5()" href="#6">Back</a>
<a onclick="page7()" href="#7">Next</a>
</div>
<div id="view7" class="EFcontent">
<p>content7</p>
<a onclick="page6()" href="#7">Back</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init(){
function clear() {
document.getElementById('view1').style.display = 'none';
document.getElementById('mItem1').style.backgroundColor = '#dddddd';
document.getElementById('view2').style.display = 'none';
document.getElementById('mItem2').style.backgroundColor = '#dddddd';
document.getElementById('view3').style.display = 'none';
document.getElementById('mItem3').style.backgroundColor = '#dddddd';
document.getElementById('view4').style.display = 'none';
document.getElementById('mItem4').style.backgroundColor = '#dddddd';
document.getElementById('view5').style.display = 'none';
document.getElementById('mItem5').style.backgroundColor = '#dddddd';
document.getElementById('view6').style.display = 'none';
document.getElementById('mItem6').style.backgroundColor = '#dddddd';
document.getElementById('view7').style.display = 'none';
document.getElementById('mItem7').style.backgroundColor = '#dddddd';
}
function page1() {clear(); document.getElementById('view1').style.display = 'block';
document.getElementById('mItem1').style.backgroundColor = '#FFA500';}
function page2() {clear(); document.getElementById('view2').style.display = 'block';
document.getElementById('mItem2').style.backgroundColor = '#FFA500';}
function page3() {clear(); document.getElementById('view3').style.display = 'block';
document.getElementById('mItem3').style.backgroundColor = '#FFA500';}
function page4() {clear(); document.getElementById('view4').style.display = 'block';
document.getElementById('mItem4').style.backgroundColor = '#FFA500';}
function page5() {clear(); document.getElementById('view5').style.display = 'block';
document.getElementById('mItem5').style.backgroundColor = '#FFA500';}
function page6() {clear(); document.getElementById('view6').style.display = 'block';
document.getElementById('mItem6').style.backgroundColor = '#FFA500';}
function page7() {clear(); document.getElementById('view7').style.display = 'block';
document.getElementById('mItem7').style.backgroundColor = '#FFA500';}
}
</script>
</body>
</html>
Fiddle
There are a couple of issues here.
Firstly jquery isnt included, but thats fine because you are not using it really, you dont need that $(document line.
Your code can't find the page1 . . . page7 functions, which is why you are getting errors (masked by the cant find $ error.)
All you need to do is remove the $(document as you arnt using it, and get rid of you init method, like this.
(jsfiddle with init and $(document removed)
Sorry for the unclear question title...couldn't think how to put the question in a shirt summary.
I have css to change the background-color of a link when hovered over (with css transistion to fade the color in).
Due the nature of the requirement, I use JS to change the background color of the link which is in use (I have tabs, the selected one's background is selected using JS - getElementById('foo').style.backgroundColor = 'red';).
Even after a tab has been selected, I want the others to change color when hovering.
It works initially but once I have clicked on a tab (JS then changes that tab's color), the hover css style does not work - the other links no longer change color when hovering.
Has anyone else had the same problem?
HTML:
<div class="software_section_selects_wrapper">
<a id="a1" onclick="displayArrow('1')">OVERVIEW</a>
<a id="a2" onclick="displayArrow('2')">SPECS</a>
<a id="a3" onclick="displayArrow('3')">COMMENTS</a>
<div style="clear: both;"></div>
</div>
<div class="section_selects_arrow_wrapper">
<img id="red1"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
<img id="red2"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
<img id="red3"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
</div>
<div id="overview" class="software_overview">
</div>
<div id="specs" class="software_overview">
</div>
<div id="comments" class="software_overview">
</div>
JS:
function displayArrow(arrow) {
var which_arrow = arrow;
if (which_arrow == '1') {
document.getElementById('a1').style.backgroundColor = 'red';
document.getElementById('a2').style.backgroundColor = 'black';
document.getElementById('a3').style.backgroundColor = 'black';
document.getElementById('red1').style.display = 'block';
document.getElementById('red2').style.display = 'none';
document.getElementById('red3').style.display = 'none';
document.getElementById('overview').style.display = 'block';
document.getElementById('specs').style.display = 'none';
document.getElementById('comments').style.display = 'none';
} else if (which_arrow == '2') {
document.getElementById('a2').style.backgroundColor = 'red';
document.getElementById('a1').style.backgroundColor = 'black';
document.getElementById('a3').style.backgroundColor = 'black';
document.getElementById('red2').style.display = 'block';
document.getElementById('red1').style.display = 'none';
document.getElementById('red3').style.display = 'none';
document.getElementById('specs').style.display = 'block';
document.getElementById('overview').style.display = 'none';
document.getElementById('comments').style.display = 'none';
} else {
document.getElementById('a3').style.backgroundColor = 'red';
document.getElementById('a2').style.backgroundColor = 'black';
document.getElementById('a1').style.backgroundColor = 'black';
document.getElementById('red3').style.display = 'block';
document.getElementById('red1').style.display = 'none';
document.getElementById('red2').style.display = 'none';
document.getElementById('comments').style.display = 'block';
document.getElementById('overview').style.display = 'none';
document.getElementById('specs').style.display = 'none';
}
}
This line of code:
document.getElementById('a2').style.backgroundColor = 'black';
adds an inline style which is stronger than :hover styling coming from the stylesheet.
Instead of adding the inline style, reset it to nothing:
document.getElementById('a2').style.backgroundColor = '';
I think his is what you are looking for
<div class="software_section_selects_wrapper">
<a id="a1" onclick="displayArrow('1')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">OVERVIEW</a>
<a id="a2" onclick="displayArrow('2')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">SPECS</a>
<a id="a3" onclick="displayArrow('3')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">COMMENTS</a>
<div style="clear: both;"></div>
</div>
Add following javascript functions and change the color as you need.
function MouseHoverMethod(x) {
x.style.backgroundColor = 'green';
}
function MouseOutMethod(x) {
x.style.backgroundColor = 'black';
}
Your code is far to complicated. You are breaking rule #1 of programming: DRY - Don't repeat yourself.
Also there is no need to set the color with JavaScript, instead set a class to to selected item and use that to style it.
Example: (without the red arrow stuff, because without the style sheet it's difficult to see what you are doing there, and it probably could be replaced with some pure CSS, too):
<div class="software_section_selects_wrapper">
<a onclick="displayTab(this, 'overview')">OVERVIEW</a>
<a onclick="displayTab(this, 'specs')">SPECS</a>
<a onclick="displayTab(this, 'comments')">COMMENTS</a>
<div style="clear: both;"></div>
</div>
<div class="tabs">
<div id="overview" class="software_overview">
</div>
<div id="specs" class="software_overview">
</div>
<div id="comments" class="software_overview">
</div>
</div>
JS:
<script>
function clearClass(elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].className = '';
}
}
function displayTab(link, tabId) {
var links = link.parentNode.getElementsByTagName('a');
clearClass(links);
link.className = 'active';
var tab = document.getElementById(tabId);
var tabs = tab.parentNode.getElementsByTagName('div');
clearClass(tabs);
tab.className = 'active';
}
</script>
CSS:
.tabs > div {
display: none;
}
.tabs > div.active {
display: block;
}
.software_section_selects_wrapper > a {
color: white;
background-color: black;
}
.software_section_selects_wrapper > a.active {
color: white;
background-color: red;
}
Live: http://jsfiddle.net/d9ffnw46/1/
BTW, you should look into using a framework library such as jQuery. As a beginner it makes code such as this much simpler.
EDIT: Here's an example with jQuery: http://jsfiddle.net/d9ffnw46/2/
Thanks in advance for any possible help.
Basically I was looking to create drop down div panels that are activated by a function toggleSlider, where the panels are hidden when the page is initially loaded. The first two links "resume" and "work" function like I had hoped, where you click on one and the corresponding div drops in, and when you click on the same link again or one of the other links the content is retracted. The third link is not working like the others, when you click on it the corresponding div drops in covering the other contents, and can only be retracted on by clicking on the same link again. Here's what it looks like....
http://www.visuallypersuasive.com/jason/test.html#
And here is the javascript
function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
else {
$("#panelThatSlides").slideDown(600, function(){
$("#contentThatFades").fadeIn();
});
}
}
function toggleSlider2() {
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides2").slideDown(600, function(){
$("#contentThatFades2").fadeIn();
});
}
}
function toggleSlider3() {
if ($("#panelThatSlides3").is(":visible")) {
$("#contentThatFades3").fadeOut(600, function(){
$("#panelThatSlides3").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides3").slideDown(600, function(){
$("#contentThatFades3").fadeIn();
});
}
}
And here is the html
<div id="resume"><a class="nav" href="#" onclick="toggleSlider();">resume</a>
<div id="panelThatSlides" style="position:relative; left:250px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work"><a class="nav" href="#" onclick="toggleSlider2();">work</a>
<div id="panelThatSlides2" style="position:relative; left:-420px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades2" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact"><a class="nav" href="#" onclick="toggleSlider3();">contact</a>
<div id="panelThatSlides3" style="position:relative;left:-550px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades3" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
While I feel I have a solid basic to intermediate understanding html and css, javascript is pretty much Greek to me. Ideally I would like use this technique to nest another drop down div within the work link/div with more than three links if I could get this to work.
Thanks again to anyone who can help.
Test It I make a little change on Your Code
HTML:
<div class="navbar">
<div id="resume" class="navmenu"><a class="nav" href="#" >resume</a>
<div class="panelThatSlides" style="position:relative; left:250px; display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work" class="navmenu"><a class="nav" href="#" >work</a>
<div class="panelThatSlides" style="position:relative; left:-420px;display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact" class="navmenu"><a class="nav" href="#" >contact</a>
<div class="panelThatSlides" style="position:relative;left:-550px;display:none;background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
</div>
js That Must Put it After Html code
$(".navbar").find(".nav").bind("click",function(e){
if($(e.target.parentNode).find(".panelThatSlides").is(":visible")){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
}
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
$(e.target.parentNode).find(".panelThatSlides").slideDown(600, function(){
$(e.target.parentNode).find(".panelThatSlides").find(".contentThatFades").fadeIn();
});
return false;
});
now You Can Add Nav Without Problem