Ecommerce Shopify WordPress Discussion

How can I change styling on a button when it's clicked? [duplicate]

This question already has answers here: How to add style to button and remove style of previously clicked button? (1 answer) Click button to add a css style with js (5 answers) CSS help: active button not changing style (2 answers) Change button styling after clicked (2 answers) Closed yesterday. I have three buttons that are linked together, kind of like tabs. I want to make the name of the currently selected button appear in bold. So, when I click a button, I'd like its name to be bold, while the others remain as regular text. IDs: button1 button2 button3 I need to do this using Javascript, and I'm using WordPress Elementor. Here's what I used: Button widget - (for the 3 buttons) Text widget - to display the tab content when I click a button HTML widget - to connect the buttons and text widget I know it might seem odd since I could just use the tabs widget, but there's another functionality I need. Any suggestions, please? I'm giving this a shot, but I'm not sure where to put it. button1.style.fontWeight = '900'; Here are some codes to provide you with insight. button1.style.backgroundColor = 'white'; button1.addEventListener('click', function() { tab1.style.display = 'flex'; // Show tab1 tab2.style.display = 'none'; tab3.style.display = 'none'; resetButtonStyles(); button1.style.backgroundColor = 'white'; }); // Add click event to button2 to show tab2 and hide tab1 button2.addEventListener('click', function() { tab1.style.display = 'none'; // Hide tab1 tab2.style.display = 'flex'; tab3.style.display = 'none'; resetButtonStyles(); button2.style.backgroundColor = 'white'; }); button3.addEventListener('click', function() { tab1.style.display = 'none'; tab2.style.display = 'none'; tab3.style.display = 'flex'; resetButtonStyles(); button3.style.backgroundColor = 'white'; });
Here's a code snippet using your current functions along with the font weight addition you are trying to add. You're on the right track in that you need to turn on the styling for the clicked button and tab while turning off the styling for the two other buttons. I built a simple example of these three functions in action: tab1.style.display = 'flex'; tab2.style.display = 'none'; tab3.style.display = 'none'; button1.style.backgroundColor = 'white'; button1.style.fontWeight = '900'; button1.addEventListener('click', function() { tab1.style.display = 'flex'; tab2.style.display = 'none'; tab3.style.display = 'none'; //resetButtonStyles(); button1.style.backgroundColor = 'white'; button1.style.fontWeight = '900'; button2.style.fontWeight = '300'; button3.style.fontWeight = '300'; }); button2.addEventListener('click', function() { tab1.style.display = 'none'; tab2.style.display = 'flex'; tab3.style.display = 'none'; //resetButtonStyles(); button2.style.backgroundColor = 'white'; button1.style.fontWeight = '300'; button2.style.fontWeight = '900'; button3.style.fontWeight = '300'; }); button3.addEventListener('click', function() { tab1.style.display = 'none'; tab2.style.display = 'none'; tab3.style.display = 'flex'; //resetButtonStyles(); button3.style.backgroundColor = 'white'; button1.style.fontWeight = '300'; button2.style.fontWeight = '300'; button3.style.fontWeight = '900'; }); <button id="button1">Example button 1</button> <button id="button2">Example button 2</button> <button id="button3">Example button 3</button> <p id="tab1">Example tab 1</p> <p id="tab2">Example tab 2</p> <p id="tab3">Example tab 3</p> Run code snippetExpand snippet Something I would also suggest would be to make a single function which turns off the styling of all the buttons and then turns on the styling of the current button and tab; like this: button1.style.fontWeight = '900'; button1.style.backgroundColor = 'white'; tab2.style.display = 'none'; tab3.style.display = 'none'; function toggleTab(tab, button) { var tabs = document.getElementsByClassName('tab'); for (var i = 0; i < tabs.length; i++) { tabs[i].style.display = 'none'; } var buttons = document.getElementsByClassName('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].style.fontWeight = '300'; } tab.style.display = 'flex'; button.style.fontWeight = '900'; button.style.backgroundColor = 'white'; } <button id="button1" class="button" onclick="toggleTab(tab1, this)">Example button 1</button> <button id="button2" class="button" onclick="toggleTab(tab2, this)">Example button 2</button> <button id="button3" class="button" onclick="toggleTab(tab3, this)">Example button 3</button> <p id="tab1" class="tab">Example tab 1</p> <p id="tab2" class="tab">Example tab 2</p> <p id="tab3" class="tab">Example tab 3</p> Run code snippetExpand snippet This second suggestion isn't required, but could help simplify your code.

January 17, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.