We Keep Coding

Displaying show/hide content with a button and an .active css class

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>

Javascript if and else runs simultaneously

I want a link to select by onclick, when the link is clicked so selected, the background should change. When I click the selected link again then the background should be transparent again.
My Script:
<div style="background: transparent;" onclick="click()" id="0">
HTML:
Click
function click() {
var click = document.getElementById("0");
if(click.style.background == "transparent") {
click.style.background = "red";
}
else {
click.style.background = "transparent";
}
}

As far as I understand, you simply want a toggle. Functional code as follows.
2 important notes:
ID must not be zero (or it breaks): I replaced it by 10;
don't use click() as it's a reserved name: I replaced it by toggle().
Not much change to your code apart from the above.
Cheers.
Update to handle multiple divs: I now pass the object:
<html>
<body>
<div style="background: red;" onclick="toggle(this)" id="10">
CLICK ON 10 TO TOGGLE MY BACKGROUND COLOR
</div>
<div style="background: red;" onclick="toggle(this)" id="20">
CLICK ON 20 TO TOGGLE MY BACKGROUND COLOR
</div>
<script>
function toggle(o) {
if(o.style.background == "transparent") {
o.style.background = "red";
alert("red on "+o.id);
}
else {
o.style.background = "transparent";
alert("transparent on "+o.id);
}
}
</script>
</body>
</html>

Two things here, don't call the function click, and use the backgroundColor property, not background as background is a compound property expecting more values than just the color, so comparing it to just a color (i.e. = 'transparent") may not work
so
HTML:
<div style="background-color: transparent;" onclick="notclick()" id="0">
Javascript
function notclick() {
var click = document.getElementById("0");
if(click.style.backgroundColor == "transparent") {
click.style.backgroundColor = "red";
}
else {
click.style.backgroundColor = "transparent";
}
}
EDIT
to handle mutliple div
every div that you want the behaviour, should be like this (i.e. with the onclick(this))
<div style="background-color: transparent;" onclick="notclick(this)" id="0">
<div style="background-color: transparent;" onclick="notclick(this)" id="1">
<div style="background-color: transparent;" onclick="notclick(this)" id="2">
and the javascript should be
function notclick(ele) {
if(ele.style.backgroundColor == "transparent") {
ele.style.backgroundColor = "red";
}
else {
ele.style.backgroundColor = "transparent";
}
}
or better still
function notclick(ele) {
ele.style.backgroundColor = (ele.style.backgroundColor == "transparent" ? "red" :"transparent");
}

The problem is the method name click, inside the onclick handler it refers to the internal click method - fiddle - here click is a native method, not our method
Rename it and it should be fine - you need to use backgroundColor
<button onclick="testme()">Test</button>
then
function testme() {
var click = document.getElementById("0");
if (click.style.background == "red") {
click.style.background = "transparent";
} else {
click.style.background = "red";
}
}
Demo: Fiddle

consolidate javascript - hover navigation for revealing content

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>

Div tabs with Javascript

I organized my tabs this way:
<ul id="tabs">
<li class="selected">DIV1</li>
<li class>DIV2</li>
<li class>DIV3</li>
</ul>
<div id="tabs_content">
<div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
<div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
<div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>
I would like that when I press one of the link inside the <li> element,
the corrispondend Div become visible with display: block and the others are changed to display: none
Also I would like to do the same with the "selected" class on the clicked <li> element.
Is this possible?
I tried with:
function selectTab(src)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(src).style.display = 'block';
}
It works if I pass the ID by reference with onclick="" but I would like to avoid this.
Solution:
function selectTab(source, parent)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(source).style.display = 'block';
var elements = [].slice.apply(document.getElementsByClassName('selected'));
for (var i = 0; i < elements.length; i++) {
elements[i].className = '';
}
parent.className = 'selected';
}

Possibly this is what you want, cross-browser (IE5.5+)
CSS
.selected {
background-color: green;
}
.hide {
display: none;
}
HTML
<ul id="tabs">
<li class="selected">DIV1
</li>
<li class>DIV2
</li>
<li class>DIV3
</li>
</ul>
<div id="tabs_content">
<div id="div1">
<textarea name="div1" rows="7" cols="108"></textarea>
</div>
<div id="div2" class="hide">
<textarea name="div2" rows="7" cols="108"></textarea>
</div>
<div id="div3" class="hide">
<textarea name="div3" rows="7" cols="108"></textarea>
</div>
</div>
javascript
var tabs = document.getElementById("tabs"),
tabs_content = document.getElementById("tabs_content"),
divs = tabs_content.getElementsByTagName("div"),
divsLength = divs.length,
lis = tabs.getElementsByTagName("li"),
lisLength = lis.length;
tabs.onclick = function (evt) {
var e = evt || window.event,
target = e.target || e.srcElement,
href,
id,
index,
div;
if (target.tagName.toUpperCase() === "A") {
for (index = 0; index < lisLength; index += 1) {
lis[index].className = "";
}
target.parentNode.className = "selected";
href = target.attributes.href.nodeValue;
if (href && href.charAt(0) === "#") {
id = href.slice(1);
for (index = 0; index < divsLength; index += 1) {
div = divs[index];
if (id === div.id) {
div.className = "";
} else {
div.className = "hide";
}
}
}
}
};
jsfiddle

Your selectTab function needs to be necessarily bound to the click event on those list elements. There's no other way you can do it. Your code is good enough. You can simplify things using JQuery as well, as some other answer here points out.
Okay, do this:
In your HTML, add "tab" class to each of the tags.
<li class="selected"><a class="tab" href="#div1">DIV1</a></li>
<li class><a class="tab" href="#div2">DIV2</a></li>
<li class><a class="tab" href="#div3">DIV3</a></li>
In your jquery,
$('.tab').click(function(){
var displaydiv = $(this).attr('href');
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$(this).show();
$('"'+displaydiv+'"').show();
$(this).parent().attr('class','selected');
})

<ul id="tabs">
<li class="selected"><a onclick="showTab(this);" href="#div1">DIV1</a></li>
<li><a onclick="showTab(this);" href="#div2">DIV2</a></li>
<li><a onclick="showTab(this);" href="#div3">DIV3</a></li>
</ul>
<div id="tabs_content">
<div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
<div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
<div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>
Use the following javascript:
function showTab(a)
{
var id = a.href.replace('#','');
var tabs = document.getElementById('tabs_content').getElementsByTagName('div');
var index = -1;
for(var i=0,n=tabs.length;i<n;i+=1)
{
var t = tabs[i];
if(t.id === id)
{
t.style.display = 'block';
index = i;
}
else
{
t.style.display = 'none';
}
}
var links = document.getElementById('tabs').getElementsByTagName('li');
for(var i=0,n=links.length;i<n;i+=1)
{
links[i].setAttribute('class', index === i ? 'selected' : '');
}
}
Of course you could also first cache your menu and tabs, that way you can keep a variable. This is the proper way:
function Menu()
{
var self = this;
self.links = document.getElementById('tabs').getElementsByTagName('a');
self.tabs = document.getElementById('tabs_content').getElementsByTagName('div');
self.selectedIndex = 0;
self.n = self.links.length;
for(var i=0;i<self.n;i+=1)
{
// Set onclick for every link in the tabs-menu
self.links[i].onclick = function(ind){return function(){self.update(ind);};}(i);
}
self.update = function(ind)
{
// Hide previous tab
self.links[self.selectedIndex].parentNode.setAttribute('class', '');
self.tabs[self.selectedIndex].style.display = 'none';
// Select and show clicked tab
self.selectedIndex = ind;
self.links[self.selectedIndex].parentNode.setAttribute('class', 'selected');
self.tabs[self.selectedIndex].style.display = 'block';
};
}
setTimeout(function(){new Menu();},1);
Check out the jsfiddle for the Menu class in action: http://jsfiddle.net/3vf4A/1/. Note that even if Javascript is disabled, the a-tag will still get you to the correct area by scrolling to it automatically.

Hiding / Showing Divs - initial state

Just having a bit of difficulty with showing/hiding divs -
Basically what I'm trying to achieve is to have 3 different links, each corresponding to three different divs, only one of which shows at any one time. I've referred to this tutorial - http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ (section headed 'Here is a new demo in response to a request where only one div is displayed at any one time')
It's all working correctly, in that when I click any of my links, the correct div shows. The only problem I'm having is the initial state - I only want the first div to show initially, but currently they all display simultaneously, until I click one of the links.
I've copied the java on the website -
<script> function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
} </script>
My divs then have:
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">
These 3 divs all contain a number of other divs, none of which have 'newboxes' in the class - but perhaps this interferes?
The links sit outside of these 3 divs:
Learn HTMLBox2Box3
As far as I can see I've copied the method shown on the tutorial exactly, but for that my initial state doesn't work correctly, whereas it does on the tutorial page.
Any ideas?
Thanks!

function showonlyone(element){
for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
var div = document.getElementById('newboxes'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
to use:
showonlyone(1);
//This will show the div with ID="newboxes1"

is it not as simple as
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">

Try this in your header
<script>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
Followed by this for the div boxes and links
<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>
<div class="newboxes" id="newboxes1">
<iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
<iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes3">
<iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>