Nearly there with this but stuck. Simple price list with 5 buttons, each opening their corresponding divs and closing all other price-section divs. The ‘active’ button has different styling to when inactive. There’s also an ahref on each button so that it scrolls down to the price section on click.
It requires 2 clicks after page reload to run the function, and having read an article on here, I added the function names e.g. showOvernight(), to the script, which worked but meant that the the Annual button was the inactive color on page load, where it should have the active styling with it’s corresponding div displaying.
There’s also an issue of lagging once I add this as an html section of a WordPress site, so any help to point out why this could be would be much appreciated. Aware that I’ve overkilled it with the amount of code!
function showOvernight() {
if (document.getElementById('overnightSection').style.display == 'none') {
document.getElementById('overnightSection').style.display = 'block';
document.getElementById('weeklySection').style.display = 'none';
document.getElementById('monthlySection').style.display = 'none';
document.getElementById('sixMonthlySection').style.display = 'none';
document.getElementById('annualSection').style.display = 'none';
document.getElementById('overnightButton').style.cssText = 'color:#003456; border:solid 1px #003456';
} else {
document.getElementById('overnightSection').style.display = 'none';
document.getElementById('overnightButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
document.getElementById('weeklyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('monthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('sixMonthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('annualButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
function showWeekly() {
if (document.getElementById('weeklySection')) {
if (document.getElementById('weeklySection').style.display == 'none') {
document.getElementById('weeklySection').style.display = 'block';
document.getElementById('overnightSection').style.display = 'none';
color = '#FF6D00';
document.getElementById('monthlySection').style.display = 'none';
document.getElementById('sixMonthlySection').style.display = 'none';
document.getElementById('annualSection').style.display = 'none';
document.getElementById('weeklyButton').style.cssText = 'color:#003456; border:solid 1px #003456';
} else {
document.getElementById('weeklySection').style.display = 'none';
document.getElementById('weeklyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
}
document.getElementById('overnightButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('monthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('sixMonthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('annualButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
function showMonthly() {
if (document.getElementById('monthlySection')) {
if (document.getElementById('monthlySection').style.display == 'none') {
document.getElementById('monthlySection').style.display = 'block';
document.getElementById('weeklySection').style.display = 'none';
document.getElementById('overnightSection').style.display = 'none';
document.getElementById('sixMonthlySection').style.display = 'none';
document.getElementById('annualSection').style.display = 'none';
document.getElementById('monthlyButton').style.cssText = 'color:#003456; border:solid 1px #003456';
} else {
document.getElementById('monthlySection').style.display = 'none';
document.getElementById('monthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
}
document.getElementById('weeklyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('overnightButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('sixMonthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('annualButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
function showSixMonthly() {
if (document.getElementById('sixMonthlySection')) {
if (document.getElementById('sixMonthlySection').style.display == 'none') {
document.getElementById('sixMonthlySection').style.display = 'block';
document.getElementById('weeklySection').style.display = 'none';
document.getElementById('overnightSection').style.display = 'none';
document.getElementById('monthlySection').style.display = 'none';
document.getElementById('annualSection').style.display = 'none';
document.getElementById('sixMonthlyButton').style.cssText = 'color:#003456; border:solid 1px #003456';
} else {
document.getElementById('sixMonthlySection').style.display = 'none';
document.getElementById('sixMonthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
}
document.getElementById('weeklyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('monthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('overnightButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('annualButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
function showAnnual() {
if (document.getElementById('annualSection')) {
if (document.getElementById('annualSection').style.display == 'none') {
document.getElementById('annualSection').style.display = 'block';
document.getElementById('weeklySection').style.display = 'none';
document.getElementById('overnightSection').style.display = 'none';
document.getElementById('monthlySection').style.display = 'none';
document.getElementById('sixMonthlySection').style.display = 'none';
document.getElementById('annualButton').style.cssText = 'color:#003456; border:solid 1px #003456';
} else {
document.getElementById('annualSection').style.display = 'none';
document.getElementById('annualButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}
}
document.getElementById('weeklyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('monthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('sixMonthlyButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
document.getElementById('overnightButton').style.cssText = 'color:#FF6D00; border:solid 1px #FF6D00';
}.priceButton {
padding: 10 15px 10px 15px;
margin: 20px;
color: #FF6D00;
border: solid 1px #FF6D00;
}
#annualButton {
color: #003456;
border: solid 1px #003456
}
.priceSection {
padding: 100px;
border: 2px solid black;
}
#weeklySection {
display: none;
}
#overnightSection {
display: none;
}
#monthlySection {
display: none;
}
#sixMonthlySection {
display: none;
}
#annualSection {
display: block;
}
.space {
height: 90vh;
}<div class="space">Blank space to test anchor tag</div>
<div id="priceButtonSection">
<input id="overnightButton" class="priceButton" onclick="showOvernight();" type="button" value="Overnight">
<a href="#priceButtonSection"><input id="weeklyButton" class="priceButton" onclick="showWeekly();" type="button" value="Weekly"></a>
<a href="#priceButtonSection"><input id="monthlyButton" class="priceButton" onclick="showMonthly();" type="button" value="Monthly"></a>
<a href="#priceButtonSection"><input id="sixMonthlyButton" class="priceButton" onclick="showSixMonthly();" type="button" value="6 monthly"> </a>
<a href="#priceButtonSection"><input id="annualButton" class="priceButton" onclick="showAnnual();" type="button" value="Annually"></a>
</div>
<div id="overnightSection" class="priceSection">Overnight</div>
<div id="weeklySection" class="priceSection">Weekly</div>
<div id="monthlySection" class="priceSection">Monthly</div>
<div id="sixMonthlySection" class="priceSection">6 Monthly</div>
<div id="annualSection" class="priceSection">Annual</div>>Solution :
Here is a MUCH shorter script.
I use scrollIntoView and have wrapped the divs in a container
I also change class and toggle the hidden attribute
Lastly I removed the links from the buttons – if you need buttons shaped links, use CSS. Otherwise just use buttons
const divs = document.querySelectorAll("#divSection div");
const buttonDiv = document.getElementById("priceButtonSection")
const buttons = buttonDiv.querySelectorAll(".priceButton");
buttonDiv.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("priceButton")) {
buttons.forEach(but => { but.classList.remove("active"); but.classList.add("inactive")});
tgt.classList.add("active");
const id = tgt.id.replace("Button","Section")
divs.forEach(div => div.hidden = div.id != id);
tgt.scrollIntoView()
}
}).priceButton {
padding: 10 15px 10px 15px;
margin: 20px;
color: #FF6D00;
border: solid 1px #FF6D00;
}
.priceSection {
padding: 100px;
border: 2px solid black;
}
.space {
height: 90vh;
}
.inactive {
color: #FF6D00;
border: solid 1px #FF6D00
}
.active {
color: #003456;
border: solid 1px #003456
}<div class="space">Blank space to test anchor tag</div>
<div id="priceButtonSection">
<input id="overnightButton" class="priceButton active" type="button" value="Overnight" />
<input id="weeklyButton" class="priceButton" type="button" value="Weekly" />
<input id="monthlyButton" class="priceButton" type="button" value="Monthly" />
<input id="sixMonthlyButton" class="priceButton" type="button" value="6 monthly" />
<input id="annualButton" class="priceButton" type="button" value="Annually" />
</div>
<div id="divSection">
<div id="overnightSection" class="priceSection">Overnight</div>
<div id="weeklySection" class="priceSection" hidden>Weekly</div>
<div id="monthlySection" class="priceSection" hidden>Monthly</div>
<div id="sixMonthlySection" class="priceSection" hidden>6 Monthly</div>
<div id="annualSection" class="priceSection" hidden>Annual</div>
</div>