Title: Keep button pressed Last modified: November 28, 2016 --- # Keep button pressed * [pdegelder](https://wordpress.org/support/users/pdegelder/) * (@pdegelder) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/) * How do I create a button that on click is pressed and stays pressed. for example see: [http://jsfiddle.net/5cTH5/](http://jsfiddle.net/5cTH5/) * I’m trying to get this working in wordpress for some days now Viewing 9 replies - 1 through 9 (of 9 total) * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8490185) * Hello [@pdegelder](https://wordpress.org/support/users/pdegelder/) * The example is using jQuery (JavaScript library) to toggle (change by adding or removing) the class of the button when it’s pressed and gives it the active class that is defined in CSS. ** YOU SHOULD USE A CHILD THEME FOR YOUR PERSONAL CUSTOMIZATION OR EVERYTHING WILL BE REMOVED ON THE NEXT UPDATE OF YOUR PARENT THEME ! * To accomplish this try the following : * 1- Create a js folder at the root of your child theme (same level as style.css) then create inside this js folder a .js file for example **mybuttonclick.js** and put the following inside it * ``` ( function( $ ) { $('button').on('click', '#mybutton', function() { $(this).toggleClass('active'); } } )( jQuery ); ``` * This will tell the button that have an id of mybutton to add/remove the active class to it when it’s clicked. * 2- You should now tell WP to call the js file so the function can do it’s work. In your child theme **functions.php** file add the following * ``` function mybutton_script() { wp_enqueue_script( 'mybuttonscript', get_template_directory_uri() . '/js/mybuttonclick.js', array( 'jquery' ), '', true ); } add_action( 'wp_enqueue_scripts', 'mybutton_script' ); ``` * This will tell WP to grab the mybuttonclick.js file that is inside the js folder at the root of the theme and execute the function(s) that lives inside it. * 3- Finally, in your child theme style.css put * ``` .active{ background:#357EBD; color:#FFF } ``` * OF COURSE, you’ll have to create in your HTML a button with an id of mybutton so that the code works ! * If you need further help, don’t hesitate. * SYA 🙂 * Thread Starter [pdegelder](https://wordpress.org/support/users/pdegelder/) * (@pdegelder) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8492617) * Hi Sya, * Thanks for your help I applied the steps you mentioned above and it still doesn’t like it yet. see [http://firstcare-afy.org/de/test/](http://firstcare-afy.org/de/test/) * any advise 🙂 * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8492869) * Hello [@pdegelder](https://wordpress.org/support/users/pdegelder/) * If you gave me a link from the beginning it would have been easier. Now that I see your theme config, it’s easier for me to help you get it done. * 1- First your button is `` * 2- Change the `active` class by `clicked` ! `$(this).toggleClass('active');`** BECOMES** `$(this).toggleClass('clicked');` **AND** * ``` .clicked{ /* HERE WE JUST REPLACE active by clicked */ background:#357EBD; color:#FFF } ``` * 3- You have to note that the theme you are using have a style for button(s) So it might affect the behavior a little bit. * Tell me if it works or not, I’ll help you get it done, even concerning the theme button(s) style. * I’m LebCit by the way 🙂 SYA = See You Around 🙂 * Thread Starter [pdegelder](https://wordpress.org/support/users/pdegelder/) * (@pdegelder) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8493453) * Hello Lebcit 🙂 Thanks for your help made the change but no luck yet * [http://firstcare-afy.org/de/test/](http://firstcare-afy.org/de/test/) * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8495339) * Hello [@pdegelder](https://wordpress.org/support/users/pdegelder/) * Since the code didn’t work, I’ve decided to install the [Vortex Theme](https://wordpress.org/themes/vortex/) and make all the necessary changes to the code. It’s my fault… Did you notice that this theme **hasn’t been updated in over 2 years** ?! * **1- mybuttonclick.js** A NASTY ERROR ABOVE WHILE TARGETING THE BUTTON AND IT’S ID 🙁 * ``` (function($) { $('#mybutton').on('click', function() { /* this line changed ! */ $(this).toggleClass('clicked'); }); })(jQuery); ``` * **2- functions.php** NO CHANGES ! * ``` function mybutton_script() { wp_enqueue_script( 'mybuttonscript', get_template_directory_uri() . '/js/mybuttonclick.js', array( 'jquery' ), '', true ); } add_action( 'wp_enqueue_scripts', 'mybutton_script' ); ``` * **3- style.css** * ``` .clicked { background-color:#357EBD; color:#fff; } .clicked:hover { /* ADDED TO REMOVE THE DEFAULT HOVER EFFECT AND REPLACED IT WITH THE DESIRED ONE */ background-color:#357EBD; color:#fff; } ``` * DON’T TELL ME IT’S NOT WORKING 🙂 I’VE TRIED IT MYSELF 🙂 Just kidding, don’t hesitate, tell me if I can help your more. * SYA 🙂 * Thread Starter [pdegelder](https://wordpress.org/support/users/pdegelder/) * (@pdegelder) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8515592) * I have this theme installed for while now and hadn’t realised that there were no updates for that longtime but thank you very much for all your time and effort 😀 sorry by the way for the late feedback I just managed to get back to this issue today I have applied the updaten as you mentioned and it works!!! * [http://firstcare-afy.org/de/test/](http://firstcare-afy.org/de/test/) * Thread Starter [pdegelder](https://wordpress.org/support/users/pdegelder/) * (@pdegelder) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8524489) * Hope you don’t mind if I bothering you again. The button works thanks again now try to customize it. To give it the same look as the second button on the page * [http://firstcare-afy.org/de/test/](http://firstcare-afy.org/de/test/) * do you have any idea how to get this done? * Thread Starter [pdegelder](https://wordpress.org/support/users/pdegelder/) * (@pdegelder) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8524710) * Have found a way to get it done by creating a new tag and adding a condition to the stylesheet 🙂 * [LebCit](https://wordpress.org/support/users/lebcit/) * (@lebcit) * [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8539236) * Hello [@pdegelder](https://wordpress.org/support/users/pdegelder/) * Nice to hear that everything is working for you. Please mark this topic as resolved 🙂 * SYA 🙂 Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Keep button pressed’ is closed to new replies. ## Tags * [jquery](https://wordpress.org/support/topic-tag/jquery/) * 9 replies * 2 participants * Last reply from: [LebCit](https://wordpress.org/support/users/lebcit/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/keep-button-pressed/#post-8539236) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics