Maintain button in active state following click

Question

Maintain button in active state following click

Sorry if this is a basic question, but how can I keep a button in the :active state after clicking?

In case it's relevant, I have a sidebar with 5 buttons. Four of them trigger the appearance of one div while hiding the others, and the fifth button functions as an accordion.

HTML

  <content class="menu">
    <button onclick="myFunction1();">Home</button>
    <br>
    <button onclick="myFunction2();">About</button>
    <br>
    <button class="accordion">Work</button>
      <content class="panel">
         <button id="submenu" class="Work1" onclick="myFunction3();">Work1</button>
      </content>
    <button onclick="myFunction4();">Contacts</button>
  </content>

CSS

content.panel {
    display: none;
}

JavaScript

      function myFunction1() {
        document.getElementById("Home").style.display = "block";
        document.getElementById("About").style.display = "none";
        document.getElementById("Work1").style.display = "none";
        document.getElementById("Contacts").style.display = "none";
    }

    function myFunction2() {
      document.getElementById("Home").style.display = "none";
      document.getElementById("About").style.display = "block";
      document.getElementById("Work1").style.display = "none";
      document.getElementById("Contacts").style.display = "none";
    }

    function myFunction3() {
      document.getElementById("Home").style.display = "none";
      document.getElementById("About").style.display = "none";
      document.getElementById("Work1").style.display = "block";
      document.getElementById("Contacts").style.display = "none";
    }

    function myFunction4() {
      document.getElementById("Home").style.display = "none"; 
      document.getElementById("About").style.display = "none";
      document.getElementById("Work1").style.display = "none";
      document.getElementById("Contacts").style.display = "block";
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

html css

Answer 1

Answer №1

One interesting way to make your button interactive is by using jQuery. By adding a class to the button when it is clicked, you can change various properties such as the color of the text, border, or background-color.

$('button').on('click', function(){
    $('button').removeClass('active_button');
    $(this).addClass('active_button');
});

//Making the Home button active by default
$(document).ready(function(){
    $('#Home').addClass('active_button');
});

.active_button{
  background-color: #999;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button id="Home">Home</button>
<button>About</button>
<button>Work</button>  
<button>Work1</button>
<button>Contacts</button>

Answer 2

One interesting way to make your button interactive is by using jQuery. By adding a class to the button when it is clicked, you can change various properties such as the color of the text, border, or background-color.

$('button').on('click', function(){
    $('button').removeClass('active_button');
    $(this).addClass('active_button');
});

//Making the Home button active by default
$(document).ready(function(){
    $('#Home').addClass('active_button');
});

.active_button{
  background-color: #999;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button id="Home">Home</button>
<button>About</button>
<button>Work</button>  
<button>Work1</button>
<button>Contacts</button>

Maintain button in active state following click

Answer №1

Similar questions

css - the art of centering span text within a rounded button

Tips on incorporating a parent selector into a relative CSS selector in Selenium with Python

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Problems with WordPress Theme Rendering in Outdated Versions of Internet Explorer

Troubleshoot: Why Equal Height Columns in Bootstrap 4 are not functioning

Positioning html images to overlap each other without losing the ability to click

Is there a way to switch between different ag-grid themes using SCSS when loading them?

What is the process for adding a line of JavaScript directly into the code (instead of using an external .js file)?

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

Move the remaining blocks after deletion

Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Conceal the Angular Bootstrap modal instead of shutting it down

When I click the submit button in HTML PHP, the text in the text field disappears. How can I make sure the text stays

The size of the position fixed element in IE11 is incorrect

How does an iOS device typically manage the :hover pseudo-class?

angularjs | clear input field by clicking on icon inside input

Guide to changing the border color in a Material-UI TextField component styled with an outline design

I'm currently in the process of incorporating horizontal scrolling into various sections of an image gallery. The images will stack vertically only when the window width

What is the best way to display images one by one from a map using a random fade effect?

Accessing user input upon button press