How to Keep :Active CSS Style After Clicking an Element

How to keep an element :active even after clicking

For elements that accept user input focus, such as button elements, the :focus pseudo-class comes close to what you want. But in this case it looks like you can expand multiple sections, so :focus won't cut it here.

Instead, you can just use JS to apply an extra class, like so:

$("div[id^=flip]").click(function() {   $(this).toggleClass("flipClass-active").next("div[id^=panel]").stop().slideToggle("slow"); });

.panelClass,.flipClass {  padding: 5px;  padding-left: 15px;  border: solid 1px #c3c3c3;}.flipClass {  font-size: Large;  background-color: #4399CD;  color: #fff;  text-align: left;  cursor: pointer;  transition: all .1s ease-out;}.flipClass-active,.flipClass:active {  background: #fff;  color: #4399CD;}.flipClass::before {  content: '\f107';  font-family: FontAwesome;  font-style: normal;  font-weight: normal;  text-decoration: inherit;  padding-left: 6px;  padding-right: 8px;  transition: all .3s;}.flipClass-active::before,.flipClass:active::before {  content: '\f102';}.panelClass {  padding: 30px;  padding-top: 10px;  display: none;  background-color: #F3F5F6;  color: #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />Currently, the .flipClass:active CSS style sheet is working only for a brief moment (precisely until the duration of the mouseclick and maybe some small offset). Click and HOLD mouseclick when clicking on .flipClass to see the effect. I want it to stay!<div class="flipClass" id="flip1">FIRST HEADING</div><div class="panelClass" id="panel1">How to keep the first heading 'active' when this panel is showing? If I could figure that out, I could change the arrow to a pullup arrow too :3</div><div class="flipClass" id="flip2">SECOND HEADING</div><div class="panelClass" id="panel2">If both Headings have been clicked, this Heading and any other heading that were clicked should also be active (or atleast remain in the CSS state defined by .flipClass:active here)</div>

How to keep an :active css style after clicking a link?

Use JavaScript:

document.getElementById("target").onclick=function () {//Detects a click on #target
  if (this.classList) {//check if classlist is supported     this.classList.add("newcolor");//add the class  } else {    this.class += " newcolor";//if classlist isn't supported, add " newcolor" to the attribute value  }}

#target {  width: 50px;height: 50px;  background-color:red;  transition: all 0.5s;}
.newcolor {  background-color: blue !important;}

<div id="target">Foo</div>

How can I keep a css :active style after I release my mouse on a bootstrap navbar li

You can't keep :active after releasing the mouse button because that is not how it works.

Here are a couple of options, one javascript/jquery, the other CSS and HTML

Jquery

Clean, concise and flexible

$(document).ready(function() {
  $(".nav-pills a").click(function() {
    $(".nav-pills a").removeClass("active");
    $(this).addClass("active");
  });
});

css

.nav-pills > li > a:active,
.nav-pills > li > a.active {
  border-bottom: 5px solid white;
}

$(document).ready(function() {  $(".nav-pills a").click(function() {    $(".nav-pills a").removeClass("active");    $(this).addClass("active");  });});

.menupartial {  background-color: #16749F;  opacity: .9;  width: 100%;}.menupartial a {  color: lightgrey;  font-weight: bold;}.nav-pills > li > a {  border-radius: 0;}.nav-pills > li > a:hover {  border-radius: 0;  background-color: #16749F;  color: white;}.nav-pills > li > a:active,.nav-pills > li > a.active {  border-bottom: 5px solid white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="row menupartial">  <div class="col-md-12">    <ul class="nav nav-pills">      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>      <li><a href="#">Your Schedules</a>      </li>      <li><a href="#">Your Messages</a>      </li>      <li><a href="#">Your Groups</a>      </li>      <li><a href="#">Your Friends</a>      </li>    </ul>  </div></div>

keep button:active after click

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>

Active link css loose style after reload

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released. The :active pseudo-class is commonly used on and elements, but may be used on other elements, too.
enter link description here

there is no :active
class need to be defined as .active

.navleft li a:active rename to .navleft li a.active {

CSS change button style after click

If you're looking for a pure css option, try using the :focus pseudo class.

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}