CODEWITHSUNDEEP
htmlcss
Bruno Carvalho
Bruno Carvalho

Reputation: 29

keep button:active after click

im new at this so this might be a stupid question but how do i keep a button :active after the click?

i dont know if this changes the awnser but i have a sidebar with 5 buttons, 4 have functions to make one div appear and the others hide and the other button is 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;
}

Java

      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";
        }
    }
}

Upvotes: 0

Views: 6557

Answers (1)

Cody
Cody

Reputation: 484

You could use jQuery to add a class to your button when clicked. Either change the color of the button text, add/change a border, add/change the background-color, etc.,

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

//Home button active on page load
$(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>

Upvotes: 2

Related Questions