How to keep active css style after click a button

Question

Once the button is clicked I want it to stay with the active style instead of going back to normal style   Can this be done with CSS please  Im using blurb button from DIVI Theme  WordPress   Please help me   code     blurb-hover et pb blurb  et pb blurb content   et pb main blurb image  et-pb-icon hover          color  red  important      blurb-hover et pb blurb  et pb blurb content   et pb main blurb image  et-pb-icon selected     background-color   ff4b46    color   fff      blurb-hover et pb blurb  et pb blurb content   et pb main blurb image  et-pb-icon active       color  white  important     background-color  red       width  140px      height  100px

User · Answer

In the Divi Theme Documentation  it says that the theme comes with access to  ePanel  which also has an  Integration  section   You should be able to add this code    lt script gt        et-pb-icon    click function         this   toggleClass   active           lt  script gt    into the the box that says  Add code to the head of your blog  under the  Integration  tab  which should get the jQuery working   Then  you should be able to style your class to what ever you need

User · Answer

CSS   active denotes the interaction state  so for a button will be applied during press    focus may be a better choice here  However  the styling will be lost once another element gains focus   The final potential alternative using CSS would be to use  target  assuming the items being clicked are setting routes  e g  anchors  within the page- however this can be interrupted if you are using routing  e g  Angular   however this doesnt seem the case here    x000D   x000D   active active   x000D    color  red  x000D    x000D   focus focus   x000D    color  red  x000D    x000D   target   x000D    color  red  x000D    x000D   lt button class  active  gt Active lt  button gt  x000D   lt button class  focus  gt Focus lt  button gt  x000D   lt a href   target1  id  target1  class  target  gt Target 1 lt  a gt  x000D   lt a href   target2  id  target2  class  target  gt Target 2 lt  a gt  x000D   lt a href   target3  id  target3  class  target  gt Target 3 lt  a gt  x000D   x000D   x000D    Javascript   jQuery  As such  there is no way in CSS to absolutely toggle a styled state- if none of the above work for you  you will either need to combine with a change in your HTML  e g  based on a checkbox  or programatically apply remove a class using e g  jQuery   x000D   x000D     button   on  click   function    x000D         button   removeClass  selected    x000D        this  addClass  selected    x000D      x000D  button selected  x000D    color red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button gt Item lt  button gt  lt button gt Item lt  button gt  lt button gt Item lt  button gt  x000D     x000D   x000D   x000D

User · Answer

I FIGURED IT OUT  SIMPLE  EFFECTIVE NO jQUERY  We re going to to be using a hidden checkbox   This example includes one  on click - off click  hover   active  state   --  To make content itself clickable   HTML   lt input type  checkbox  id  activate-div  gt     lt label for  activate-div  gt      lt div class  my-div  gt          MY DIV CONTENT     lt  div gt     lt  label gt    CSS   activate-div display none        my-div background-color  FFF     activate-div checked   label   my-div background-color  000     To make button change content   HTML   lt input type  checkbox  id  activate-div  gt      lt div class  my-div  gt          MY DIV CONTENT     lt  div gt    lt label for  activate-div  gt       MY BUTTON STUFF  lt  label gt    CSS   activate-div display none    my-div background-color  FFF     activate-div checked     my-div background-color  000    Hope it helps

[html] How to keep :active css style after click a button

Examples related to html

Examples related to css

Examples related to wordpress