Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

Question

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description

Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click here for image description

However, I am trying to make sure that section 1 is displayed as shown by default when the page is refreshed.

This is the script I currently have:

<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3");
};

function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}
</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
</style>

javascript html css

Answer 1

Answer №1

To ensure that the section one is 'active' upon page load, you have the option to use either JS or CSS.

<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function(event){
event.preventDefault();
btn1.classList.add("active-btn"); // add active class
btn2.classList.remove("active-btn"); // remove from other btn
btn3.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
btn2.classList.add("active-btn");// add active class
btn1.classList.remove("active-btn"); // remove from other btn
btn3.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
btn3.classList.add("active-btn"); // add active class
btn1.classList.remove("active-btn"); // remove from other btn
btn2.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect3");
};

function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}

 
// Once everything is ready
toggleDivs("sect1"); // call it with default activated session
// if you want to load data from API then wait before calling this function. 


</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
// add class for active button
.active-btn{
   color:red;
   background: white;
}
</style>

Answer 2

To ensure that the section one is 'active' upon page load, you have the option to use either JS or CSS.

<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function(event){
event.preventDefault();
btn1.classList.add("active-btn"); // add active class
btn2.classList.remove("active-btn"); // remove from other btn
btn3.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
btn2.classList.add("active-btn");// add active class
btn1.classList.remove("active-btn"); // remove from other btn
btn3.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
btn3.classList.add("active-btn"); // add active class
btn1.classList.remove("active-btn"); // remove from other btn
btn2.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect3");
};

function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}

 
// Once everything is ready
toggleDivs("sect1"); // call it with default activated session
// if you want to load data from API then wait before calling this function. 


</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
// add class for active button
.active-btn{
   color:red;
   background: white;
}
</style>

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

Answer №1

Similar questions

Could it be that grid-area does not function properly with the attr function, or is this intentional?

Retrieve the id of the anchor tag that was selected upon clicking, and then dynamically change the content of another div

Example of fetching Pubnub history using AngularJS

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

Isotope data-filter not working properly following an Ajax callback

What steps can be taken to prevent a child component from re-rendering when the parent updates the context or state in React JS?

AngularJs is not responsive to sending POST requests with hidden <input> values

Tips for utilizing identical properties across numerous styled elements:

Enhance scrolling with a bounce effect

Currently working on a script using google-apps-script, open to any suggestions or ideas

Switching the background color in a diagonal transition when hovering from the bottom left to the top right

Exploring the world of Typescript and Angular Filter functionalities

Rows in the table are distinguished by varying colors

What are the benefits of keeping JavaScript and HTML separate in web development?

Searching for a method to retrieve information from an API using jQuery in Node.js?

Can you show me the method to import these ES6 exports? Are they specifically named exports or the default?

Adjust webpage display with JavaScript

Load Materialize autocomplete with data from a JSON file

Where should data processing be conducted: in the service or controller layer?

Tips for displaying javascript code containing variables in the executeScript method