Tips for making a dynamic active button using javascript

Question

Tips for making a dynamic active button using javascript

I'm trying to create a toggle button with eight buttons. When seven out of the toggle buttons are clicked, it should toggle between two classes and change its CSS styles. If the daily button is clicked, it should toggle the styles of the other seven buttons.

This is the code I have so far:

The toggleclass(this) function I have defined toggles from class1 to class2 in CSS.

I attempted the following:

<div id="menu1">

$(document).ready(function() {

$('#hey').click(function()
{
         if($('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').hasClass('class1')){
     $('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').toggleClass('class2')
  }else{
    $('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').toggleClass('class2')
  }

});

});



                        <div class="cols"><button id="btnDiv" onclick="toggleclass(this);monday();" class="class1"><h5>MONDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv1" onclick="toggleclass(this);tuesday();" class="class1"><h5>TUESDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv2" onclick="toggleclass(this);wednesday();" class="class1"><h5>WEDNESDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv3" onclick="toggleclass(this);thursday();" class="class1"><h5>THURSDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv4" onclick="toggleclass(this);friday();" class="class1"><h5>FRIDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv5" onclick="toggleclass(this);saturday();" class="class1"><h5>SATURDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv6" onclick="toggleclass(this);sunday();" class="class1"><h5>SUNDAY</h5></button></div>
                        <div class="cols"><button id="hey" onclick="toggleclass(this);daily();showdaily();" class="class1"><h5>DAILY</h5></button></div>

I'm having trouble getting this code to work. Can someone please help me figure out how to make the daily button change the styles of the other buttons to class 1 when clicked and back to class 2 again?

A simple solution using raw JavaScript would be greatly appreciated as I am new to JavaScript. :)

javascript html css

Answer 1

Answer №1

For those who view this as a "learning exercise," consider minimizing the excessive HTML to streamline the process. Removing unnecessary divs containing each button can enhance the efficiency of your code. Rather than cluttering the structure, focus on achieving the desired functionality.

Here is a starting point to guide you through the process. When a button is clicked, the objective is to switch all other buttons to "class1" and set the currently clicked button to "class2". Utilize the javascript classList attribute for seamless toggling between classes.

Refine the code further to include toggling options for a select all button. Whether you prefer to turn all buttons on, off, or toggle them individually, customize the functionality to suit your needs. Experiment with different possibilities to achieve the desired outcome.

By incorporating minor modifications to the existing code, you can enhance the user experience. Simplify the process by adding a class to all day buttons for easier access and manipulation. Implement listeners for efficient toggling between classes and optimize the functionality for seamless interaction.

Answer 2

For those who view this as a "learning exercise," consider minimizing the excessive HTML to streamline the process. Removing unnecessary divs containing each button can enhance the efficiency of your code. Rather than cluttering the structure, focus on achieving the desired functionality.

Here is a starting point to guide you through the process. When a button is clicked, the objective is to switch all other buttons to "class1" and set the currently clicked button to "class2". Utilize the javascript classList attribute for seamless toggling between classes.

Refine the code further to include toggling options for a select all button. Whether you prefer to turn all buttons on, off, or toggle them individually, customize the functionality to suit your needs. Experiment with different possibilities to achieve the desired outcome.

By incorporating minor modifications to the existing code, you can enhance the user experience. Simplify the process by adding a class to all day buttons for easier access and manipulation. Implement listeners for efficient toggling between classes and optimize the functionality for seamless interaction.

Answer 3

Answer №2

Here is a simple example of how you could achieve this:

<style>
  .style1 {
    background-color: blue;
  }
  .style2 {
    background-color: yellow;
  }
</style>

<div>
<button class="style1" onclick="toggleStyles(event)">Click me</button>
<button class="style1" onclick="toggleStyles(event)">Click me</button>
</div>

<script>
function toggleStyles(e) {
    if (e.target.className.trim() === 'style1') {
     e.target.className = 'style2';
  } else {
     e.target.className = 'style1';
  }
}

</script>

Check out the live demo here: https://jsfiddle.net/abcdefg/

Answer 4

Here is a simple example of how you could achieve this:

<style>
  .style1 {
    background-color: blue;
  }
  .style2 {
    background-color: yellow;
  }
</style>

<div>
<button class="style1" onclick="toggleStyles(event)">Click me</button>
<button class="style1" onclick="toggleStyles(event)">Click me</button>
</div>

<script>
function toggleStyles(e) {
    if (e.target.className.trim() === 'style1') {
     e.target.className = 'style2';
  } else {
     e.target.className = 'style1';
  }
}

</script>

Check out the live demo here: https://jsfiddle.net/abcdefg/

Tips for making a dynamic active button using javascript

Answer №1

Answer №2

Similar questions

Is it advisable for a component to handle the states of its sub-components within the ngrx/store framework?

Implement the same reference functionality in a React Function component that is seen in a React Class component

What is the best way to customize multiple checkboxes in React Native?

Is there a way to include an optional backslash in URLs using the .htaccess file without leading browsers to believe I am navigating to a subfolder?

Error Message: "BlurbError on /taskapp/taskapp-board/ Failed to parse the remaining: '(status='fresh')' from 'tasks.filter(status='fresh')'"

The art of layering images: How to stack one image on top of another

What's the best way to align three images in a row?

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

JS Emphasis on Scrolling Div

Tips for achieving a full div image on hover

Service in AngularJS designed specifically for storing and managing SEO metadata

Retrieving outcome of Solidity contract function using web3-1.0.0-beta.27

MVC Controller and JavaScript Ajax Call necessitate authentication for communication

Having difficulty saving data in database using Ajax request from a Chrome extension

Guidelines for retrieving a file from Amazon S3 through a web browser utilizing Python (and boto) on Google App Engine

transition from jQuery to Zepto

Tracking user session duration on a React Native app can be achieved by implementing a feature that monitors and

Retrieving the input value from embedded cells in a specific row of a table

Alignment Woes in Bootstrap Designs

When using Mongoose paginate, there is always one missing document