Hello there, I'm currently working on a web application and I need to implement some JavaScript code. The application consists of three sections, each with its own title and button. When the button is clicked, a hidden div tag is displayed. Clicking the button again will hide the div. Each button only works for its respective section, so pressing the Section1 button will show/hide the Section1 div, and so on for the other sections/buttons.
Specifically, I want to make it so that when one div is shown, the other two become invisible. This means that only one div can be displayed at a time on the mainpage.jsp for better usability.
Everything was going smoothly until I encountered two new features that I'm having trouble implementing. Firstly, the application needs to remember which div was displayed after a reload, rather than resetting all divs. I've tried using localStorage and sessionStorage without success, and as a newcomer to JavaScript, I suspect I may be missing something important.
The second feature is more of an aesthetic detail - I want the buttons to change their names between "Show Section (number)" and "Hide Section (number)" every time they are clicked. Unfortunately, my attempts from Stack Overflow resulted in errors where the button names did not update correctly and affected all buttons, not just those in the three sections.
I have hit a wall in my JavaScript knowledge and would greatly appreciate any guidance or help you may offer. Thank you for your time and assistance.
Here's a snippet of my code:
// Checking localStorage
if ( (JSON.stringify(localStorage.getItem('activespoiler')) !== 'none') && (JSON.stringify(localStorage.getItem('activespoiler')) !== null) )
{
document.getElementById(localStorage.getItem('activespoiler')).style.display = 'block';
}
// Show/hide div content defined by id (spoiler1, spoiler2, spoiler3)
function hideandshow(spoiler)
{
if(document.getElementById(spoiler).style.display === 'none')
{
document.getElementById(spoiler).style.display = 'block';
localStorage.setItem('activespoiler',JSON.stringify(spoiler));
// Closing other spoilers
if (spoiler === 'spoiler1')
{
document.getElementById('spoiler2').style.display = 'none';
document.getElementById('spoiler3').style.display = 'none';
}
else if (spoiler === 'spoiler2')
{
document.getElementById('spoiler1').style.display = 'none';
document.getElementById('spoiler3').style.display = 'none';
}
else if (spoiler === 'spoiler3')
{
document.getElementById('spoiler1').style.display = 'none';
document.getElementById('spoiler2').style.display = 'none';
}
}
else if (document.getElementById(spoiler).style.display === 'block')
{
document.getElementById(spoiler).style.display = 'none';
localStorage.setItem('activespoiler','none');
}
} <button type="button" onclick="hideandshow('spoiler1')">Show/Hide Section 1</button>
<div id="spoiler1" style="display:none">
This is the hidden text SECTION-1! <br>
<form action="mainpage.jsp" method="POST">
<button type="submit">RELOAD PAGE SECTION-1</button>
</form>
</div> <br><br>
<!-- Section 2 -->
<button type="button" onclick="hideandshow('spoiler2')">Show/Hide Section 2</button>
<div id="spoiler2" style="display:none">
This is the hidden text SECTION-2!
<form action="mainpage.jsp" method="POST">
<button type="submit">RELOAD PAGE SECTION-2</button>
</form>
</div> <br><br>
<!-- Section 3 -->
<button type="button" onclick="hideandshow('spoiler3')">Show/Hide Section 3</button>
<div id="spoiler3" style="display:none">
This is the hidden text SECTION-3!
<form action="mainpage.jsp" method="POST">
<button type="submit">RELOAD PAGE SECTION-3</button>
</form>
</div>