Title: Using JavaScript with Gutenberg Button Last modified: November 9, 2021 --- # Using JavaScript with Gutenberg Button * Resolved [gamicord](https://wordpress.org/support/users/gamicord/) * (@gamicord) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/) * I created two(2) sections using Gutenberg. Now, there’s a button I will like to add JavaScript to. * I want to hide a Block by default, with a button under it that says “Show More”. * If the button is clicked, the hidden Section should appear, and the button Text should change to “Show Less”. * If the Button is clicked again, the visible Section should become hidden again, and the Button Text should say “Show More”. * So when hidden, the button says “Show More”, and when visible the button says“ Show Less”. * Here’s my JavaScript below: ================================================ =========== function toggleBlock() { // get the block var myBlock = document. getElementById(‘service-area-two’); * // get the current value of the block’s display property var displaySetting = myBlock.style.display; * // also get the block button, so we can change what it says var blockButton = document.getElementById(‘Show More’); * // now toggle the block and the button text, depending on current state if ( displaySetting == ‘block’) { // block is visible. hide it myBlock.style.display = ‘none’; // change button text blockButton.innerHTML = ‘Show Less’; } else {// block is hidden. show it myBlock.style.display = ‘block’; // change button text blockButton.innerHTML = ‘Show More’; } } * ========================================== * The **BLOCK ID**: **service-area-two** The Button Name is: **Toggle Button ** * I know I’m doing a lot of things wrong. * How can I get this button to work with JavaScript? * Regards Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [SilkyPress](https://wordpress.org/support/users/diana_burduja/) * (@diana_burduja) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15052233) * Hello Gamicord, * for starters, this support forum is for issues related to the Simple Custom CSS and JS plugin. If you need help with debugging a specific JS/CSS code, please consider opening a topic on stackoverflow.com. * Now, I’ll make here an exception and help you out with the specific JS code: * 1. the retrieval of the “Show More” button looks wrong (`var blockButton = document. getElementById('Show More');`). “Show More” is the text of the button. You need to replace the “Show More” text with the button’s ID inside the document.getElementById() call. * 2. the whole JS code is a function definition. You need to tell the browser to call the function after the page has loaded. You can do that with the following JS code: * ``` jQuery(document).ready(function( $ ){ toggleBlock(); }); ``` * which can be appended at the end of the function definition. * As mentioned before, if you need additional help, please consider opening a topic on the stackoverflow website. - This reply was modified 4 years, 7 months ago by [SilkyPress](https://wordpress.org/support/users/diana_burduja/). * Thread Starter [gamicord](https://wordpress.org/support/users/gamicord/) * (@gamicord) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15058417) * Thanks for making the exception. I really appreciate. * Now I have 2 JavaScript Codes, but none seem to be working. * I got this one from a Tutorial Website: * ``` function toggleBlock() { // get the block var myBlock = document.getElementById('service-area2'); // get the current value of the block's display property var displaySetting = myBlock.style.display; // also get the block button, so we can change what it says var blockButton = document.getElementById('ShowMore'); // now toggle the block and the button text, depending on current state if (displaySetting == 'block') { // block is visible. hide it myBlock.style.display = 'none'; // change button text blockButton.innerHTML = 'Show Less'; } else { // block is hidden. show it myBlock.style.display = 'block'; // change button text blockButton.innerHTML = 'Show More'; } } ``` * And this one from **Stack OverFlow**: * ``` function toggleBlock() { var myBlock = document.getElementById("service-area2"); var blockButton = document.getElementById("ShowMore"); if (myBlock.hidden) { blockButton.innerHTML = "Show Less"; myBlock.hidden = false; } else { blockButton.innerHTML = "Show More"; myBlock.hidden = true; } } ``` * I’ve created the HTML button on the WordPress Page here– [https://treeremoval.ga/tree-service-ulmar/#ShowMore](https://treeremoval.ga/tree-service-ulmar/#ShowMore) * You guys are expert Programmers. If it is you that wants to implement something like this, How would you write your Code? * Or seeing how far I’ve come, how can you help me rewrite my Code to make it fully functional? * Needing to here from you soon. * Regards * Plugin Author [SilkyPress](https://wordpress.org/support/users/diana_burduja/) * (@diana_burduja) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15058434) * The ID of the myBlock should be “service-area-two” instead of “service-area2”. * Thread Starter [gamicord](https://wordpress.org/support/users/gamicord/) * (@gamicord) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15058912) * I will like to say Thank You to you. A very big Thank You indeed because when you said my Retrieval of the Button was wrong, I had a relook: and actually realized that this error was the bug in my Code. * By simply changing this Button ID, and using the Block ID instead of the CSS Class Name, the Code then worked fine. * Thanks for helping me know where to look. * Regards * Plugin Author [SilkyPress](https://wordpress.org/support/users/diana_burduja/) * (@diana_burduja) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15059059) * You’re welcome 🙂 * Thread Starter [gamicord](https://wordpress.org/support/users/gamicord/) * (@gamicord) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15059844) * I’m so sorry to bother you. I mean it, that I’m really sorry to bother you. But there’s still a small problem to fix– * Now, the button is working well. This is the final Code that worked: * ``` function toggleBlock() { var myBlock = document.getElementById("service-area2"); var blockButton = document.getElementById("ShowMore"); if (myBlock.hidden) { blockButton.innerHTML = "Show Less"; myBlock.hidden = false; } else { blockButton.innerHTML = "Show More"; myBlock.hidden = true; } } ``` * The problem is that when the Page loads, the section that I want to hide on Page load is not hidden. Yet the button still says “**Show More**” instead of saying“** Show Less**“. * However, when I click the button after the page load, everything starts working well. * The problem is just that–on Page load, I expect a section to be hidden, and the button should say “Show More”. * And if I use CSS display:none Property to hide the section, the button doesn’t work again. * How do you think I can fix this? And make the flow to run as expected? * Regards * Thread Starter [gamicord](https://wordpress.org/support/users/gamicord/) * (@gamicord) * [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15060514) * So sorry. Don’t answer that question again. I went to W3 Schools and tried to see what changes I can do to my Code. I realized that I wasn’t targeting my function through it’s display Style. * So the code was working, but not with the expected behaviour. So I changed the Code to target its display through its display style. Then I added the JQuery Code you gave me after my Code as you instructed me, and Wow, all is working well now. * This issue is now Resolved. * Thanks so much. * High Regards Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Using JavaScript with Gutenberg Button’ is closed to new replies. * ![](https://ps.w.org/custom-css-js/assets/icon-128x128.png?rev=1303730) * [Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/) * [Frequently Asked Questions](https://wordpress.org/plugins/custom-css-js/#faq) * [Support Threads](https://wordpress.org/support/plugin/custom-css-js/) * [Active Topics](https://wordpress.org/support/plugin/custom-css-js/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/custom-css-js/unresolved/) * [Reviews](https://wordpress.org/support/plugin/custom-css-js/reviews/) * 7 replies * 2 participants * Last reply from: [gamicord](https://wordpress.org/support/users/gamicord/) * Last activity: [4 years, 7 months ago](https://wordpress.org/support/topic/using-javascript-with-gutenberg-button/#post-15060514) * Status: resolved