I have a tab menu on my website and the code used for it works perfectly. JavaScript:
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "flex";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1')" class="tab-button">
<h5>IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2')" class="tab-button">
<h5>Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3')" class="tab-button">
<h5>Cost Effective</h5>
</div>
</div>
And then obviously I applied the IDs ("tab-[1/2/3]") and classes ("tab") to the divs I want as tabs. However, when I replicate the exact same code to have a tab button highlighted for the current tab open, it doesn't work. JavaScript:
function selectedTab(selectName) {
var i;
var x = document.getElementsByClassName("select");
for (i = 0; i < x.length; i++) {
x[i].style.border-bottom-color = "#dbdbdb";
}
document.getElementById(selectName).style.border-bottom-color = "#25a7df";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1'); selectedTab('select-1')" class="tab-button">
<h5 id="select-1" class="select">IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2'); selectedTab('select-2')" class="tab-button">
<h5 id="select-2" class="select">Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3'); selectedTab('select-3')" class="tab-button">
<h5 id="select-3" class="select">Cost Effective</h5>
</div>
</div>
I've looked literally everywhere online and had multiple people look at this and nobody can find a solution. Can anyone help?
border-bottom-color is not a valid style property, you need to replace hyphen case with camel case
You need to use the borderBottomColor property of style in selectTab method
function selectedTab(selectName) {
var x = document.getElementsByClassName("select");
for (var i = 0; i < x.length; i++) {
x[i].style.borderBottomColor = "#dbdbdb"; //observe style property Change
}
document.getElementById(selectName).style.borderBottomColor = "#25a7df";
}
Related
I'm trying to hide a DIV's parent when a certain DIV contains a specific text.
An example. This DIV I want to stay:
<div class="report-per-day">
<div class="report-day">26 May 2022</div>
<div class="status-report-rows">
<p class="report__headline">This is our report</p>
</div>
</div>
</div>
But I want to hide this whole DIV, because there's a DIV .mt-2, which contains "No new incident."
<div class="report-per-day">
<div class="report-day">25 May 2022</div>
<div class="mt-2" style="display: none;">
<small class="text-muted">No new incident.</small>
</div>
</div>
</div>
I have this Java Script, but it only hides the .mt-2. I'd also like to hide its 2 parents, .report-per-day and .report-day
Do you guys happen to have any suggestions? Thanks a lot!
const divs = document.getElementsByClassName('mt-2');
for (let x = 0; x < divs.length; x++) {
const div = divs[x];
const content = div.textContent.trim();
if (content == 'No incidents reported.') {
div.style.display = 'none';
}
}
Loop the parent div you want to hide instead of mt-2 and check the content of mt-2 inside the loop. Try:
const divs = document.getElementsByClassName('report-per-day'); // report-per-day instead of mt-2
for (let x = 0; x < divs.length; x++) {
const div = divs[x].querySelector('.mt-2'); // add a selector for .mt-2
const content = div.textContent.trim();
if (content == 'No incidents reported.') {
div.style.display = 'none';
}
}
You can use parentElement
const divs = document.getElementsByClassName('mt-2');
for (let x = 0; x < divs.length; x++) {
const div = divs[x];
const content = div.textContent.trim();
if (content === 'No new incident.') {
div.parentElement.style.display = 'none';
}
}
<div class="report-per-day">
<div class="report-day">26 May 2022</div>
<div class="status-report-rows">
<p class="report__headline">This is our report</p>
</div>
</div>
<div class="report-per-day">
<div class="report-day">25 May 2022</div>
<div class="mt-2">
<small class="text-muted">No new incident.</small>
</div>
</div>
I need to have a function that would add an existing div with a class (along with its underlying elements) to a particular div using for loop. It looks like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
I need to loop through a function that will produce or duplicate "list-row" twice.
$(function() {
var leftcol = document.getElementsByClassName('left-col');
for (var i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row');
leftcol.appendChild(listrow[i]);
}
})
It should look like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
You can try the following way:
$(function() {
var leftcol = document.querySelector('.left-col');
for (let i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row').cloneNode();
listrow.textContent = i + 1 + listrow.textContent;
leftcol.appendChild(listrow);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-col">
<div class="list-row">0</div>
</div>
You could use cloneNode and set the deep property to true. This will clone the node and all of its descendants.
For example:
function cloneNode(copies = 1) {
for (let i = 0; i < copies; i++) {
let leftcol = document.getElementsByClassName('left-col')[0];
let nodeToClone = document.querySelector(".list-row");
let clonedNode = nodeToClone.cloneNode(true);
leftcol.appendChild(clonedNode);
}
}
clone.addEventListener("click", function() {
cloneNode();
});
<button id="clone" type="button">Clone Node</button>
<div class="left-col">
<div class="list-row">Test</div>
</div>
If you wanted to insert more than one copy, you could pass a different value to the cloneNode function.
You can use jQuery's .clone() method to copy the entire content of an element to another element. The boolean argument passed to the clone function determines whether the events associated with the cloned element has to be copied or not. true indicates all the events associated with that div has to be copied.
$(function() {
$('.list-row').each(function(){
$(".left-col").append($(this).clone(true));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="left-col">
<div class="list-row"><h1>This is original row</h1></div>
</div>
$(function() {
var leftcol = document.getElementsByClassName('left-col');
var listrow = document.querySelector('.list-row');
for (var i = 0; i < 2; i++) {
leftcol.appendChild(listrow.clone(true));
}
})
My question is abou make "continue" button appear when items selected and disappear when items unselected using JavaScript.
var typpro = document.getElementsByClassName("typpro"),
continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if (this.classList.contains("active")) {
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Volume Button</button>
</div>
</div>
<div class=" col-xs-12">
<div class="typpro">
<button style="width:98%">Other</button>
</div>
</div>
<div class=" col-xs-12">
<div class="inputpro">
<input type="text" placeholder="your Problem">
</div>
</div>
<div class=" col-xs-12">
<div class="continue">
<button>Continue</button>
</div>
</div>
</div>
</div>
So, you've got a couple of things working against you with your code as it stands.
Firstly, you need to actually define your continubutton variable, like so:
HTML
<button id="continubutton" style="display: none;">Continue</button>
JS:
var continubutton = document.getElementById('continubutton');
Then, you also need to define your typpro variable, like so:
JS:
var typpro = document.getElementsByClassName('typpro');
For what you're trying to do, I went with display: inline and display: none, instead of the height change because there would be a fair amount of additional CSS you would need to do to accomplish this. But here is the final result:
HTML:
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<button id="continubutton" style="display: none;">Continue</button>
</div>
And the JS:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementById('continubutton');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.display = "inline";
} else {
continubutton[0].style.display = "none";
}
};
}
EDIT: Since using height seems to be the route we need to go, here is updated code:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementsByClassName('continue');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<div class="continue" style="height: 0;overflow:hidden;">
<button id="continubutton">Continue</button>
</div>
</div>
It's important that you set the initial height on your <div class="continue"></div> container, and that you set it to overflow: hidden; so anything that falls outside of the bounding box is hidden from view. This will allow you to animate the height so the button appears "hidden" until an option is selected.
the solution is
for (let btn of typpro) {
btn.addEventListener('click', function() {
let token = 0;
this.classList.toggle('active');
for (let i = 0; i < typpro.length; i += 1) {
if (typpro[i].classList.contains('active')) {
token += 1;
}
}
if (token > 0) {
continubutton[0].style.height = '100px';
} else {
continubutton[0].style.height = '0';
}
});
}
I have a product list that is structured like the below HTML.
I am trying to select the elements with the class="www-components-menu-product-list--item_DgfZL" that contain the elements with the class name class="www-components-product-card--cbd_2luC9".
Then I want to hide those elements in a click function.
Please note. I have a lot of these items on the page, the function should apply to all the potential elements not just the two I have in the example.
I already understand how to do this with Jquery, but I am trying to avoid Jquery here.
This my attempt with javascript.
var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");
for (i = 0; i < itemClass.length; i++) {
var insideItemClass = itemClass.getElementsByClassName("www-components-product-card--hybrid_2AD7v");
for (i = 0; i < insideItemClass.length; i++) {
insideItemClass.style.display = "none";
}
}
HTML Structure:
<div class="www-components-menu-product-list--item_DgfZL">
<div class="www-components-product-card--card_2mjWk">
<div>
<div class="www-components-product-card--hybrid_2AD7v www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">
</div>
<div class="www-components-product-card--description_3un8n" style="height: 38%;">
</div>
</div>
</div>
</div>
<div class="www-components-menu-product-list--item_DgfZL">
<div class="www-components-product-card--card_2mjWk">
<div>
<div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">
</div>
<div class="www-components-product-card--description_3un8n" style="height: 38%;">
</div>
</div>
</div>
</div>
<div class="www-components-menu-product-list--item_DgfZL">
<div class="www-components-product-card--card_2mjWk">
<div>
<div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">
</div>
<div class="www-components-product-card--description_3un8n" style="height: 38%;">
</div>
</div>
</div>
</div>
MY ERROR
01:26:25.549 menubest.html:2923 Uncaught TypeError: itemClass.getElementsByClassName is not a function
at HTMLDivElement.<anonymous> (menubest.html:2923)
use this:
itemClass[i].getElementsByClassName
insideItemClass[i].style.display = "none";
instead of
itemClass.getElementsByClassName
insideItemClass.style.display = "none";
Full code:
var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");
for (i = 0; i < itemClass.length; i++) {
var insideItemClass = itemClass[i].getElementsByClassName("www-components-product-card--hybrid_2AD7v");
if(insideItemClass.length > 0){
itemClass.item(i).style.display = "none";
}
}
Here is the fiddle: https://jsfiddle.net/jeL0fezh/8/
I have a side nav on the left hand side with different types of surgeries. They are all in an ul.
When you click on a surgery (ul li), a div will show up on the right hand side, displaying FAQ's for that specific surgery. Clicking on another link in the ul will hide the currently open div and display the one you've just clicked on.
I've managed to do this, but I would also like to toggle the visibility of the FAQ div when I click the same ul li link again.
<html>
<head>
<style>
#popup div { display:none; }
#popup div.show { display:block; }
ul#links li { cursor:pointer;}
</style>
</head>
<body>
<div class="sidenav">
<ul id="links">
<li id="armlift">Arm Lift</li>
<li id="liposuction">Liposuction</li>
<li id="tummytuck">Tummy Tuck</li>
<li id="postgastric">Post-Gastric Bypass Surgery</li>
</ul>
</div>
<div id="popup">
<div id="a_armlift">
<span class="faq_header">Arm Lift</span>
<p class="treatment_question">What is a an Arm Lift?</p>
<div class="treatment_answer">This surgery removes excess...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">An incision is made...</div>
</div>
<div id="a_liposuction">
<span class="faq_header">Liposuction Lift</span>
<p class="treatment_question">What is a Liposuction?</p>
<div class="treatment_answer">Liposuction is the removal...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Ideal candidates for...</div>
</div>
<div id="a_tummytuck">
<span class="faq_header">Tummy Tuck</span>
<p class="treatment_question">What is a Tummy Tuck?</p>
<div class="treatment_answer">A tummy tuck tightens...</div>
<p class="treatment_question">What is a Mini Tummy Tuck?</p>
<div class="treatment_answer">A mini-tuck is a...</div>
</div>
<div id="a_postgastric">
<span class="faq_header">Post-Gastric Bypass Surgery</span>
<p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
<div class="treatment_answer">Gastric bypass surgery removes...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Each patient has...</div>
</div>
</div>
<script type="text/javascript">
var links_ul = document.getElementById('links');
for (var i = 0; i < links_ul.children.length; i++) {
links_ul.children[i].onclick = function(ev) {
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
for (var j = 0; j < popup.length; j++) {
popup[j].className = '';
}
s.className = 'show';
};
}
</script>
</body>
</html>
I would recommend looking into doing this differently. There are many plugins available that do this sort of thing.
But, here's the answer to your question: http://jsfiddle.net/6Vku8/1/
for (var i = 0; i < links_ul.children.length; i++) {
links_ul.children[i].onclick = function(ev) {
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
var shown = s.className == 'show';
for (var j = 0; j < popup.length; j++) {
popup[j].className = '';
}
s.className = shown ? '' : 'show';
};
}
You need to find out whether or not the div is "shown" before hiding all of the divs.