Creating a toggle link with 5 different states in coding

Question

Creating a toggle link with 5 different states in coding

I have an HTML table where certain TDs contain inline styles, title tags, and links. I am looking to implement a feature where users can hide these elements by clicking the same icon multiple times. For example, on the first click, only styles are removed, on the second click, only links are removed, on the third click, only title tags are removed, on the fourth click, everything is removed, and on the fifth click, all elements are restored.

Currently, I am able to remove individual elements using the following code snippets:

$('a .icon-remove').click(function () {
    $('.mindteq_content_tbl_container td[style]').css('background-color', '').css('color', '');
});

The same process can be applied to title tags and links as well:

$('.tbl_container td a[title]').remove();

$('.tbl_container td a').removeAttr('href').css('border-bottom', '0px');

However, I am unsure of how to create a button with 5 different states to achieve this functionality.

jquery html css

Answer 1

Answer №1

Instead of removing elements, it's better to simply hide them using the hide() function so you can easily show them again later.

If you're working with a 5-state button, it's important to have an indicator that shows the current state of the button. You can achieve this by using a variable or an aria-attribute.

Example using aria

$(function() {
    $(".toggle").click(function() {
        var $this = $(this);
        var state = parseInt($this.attr('aria-state')) || 0;
        state++;

        $this.text("toggle "+state);
        switch(state) {
            case 5:
                //action 5
                break;
            case 4:
                //action 4
                break;
            case 3:
                //action 3
                break;
            case 2:
                //action 2
                break;
            case 1:
                //action 1
                break;
        }

        if(state >= 5)
            state = 0;

        $this.attr('aria-state', state);
    });    
});

View on JSFiddle

For further enhancement, consider creating a jquery-ui widget and setting up event handlers for the 5 states.

Answer 2

Instead of removing elements, it's better to simply hide them using the hide() function so you can easily show them again later.

If you're working with a 5-state button, it's important to have an indicator that shows the current state of the button. You can achieve this by using a variable or an aria-attribute.

Example using aria

$(function() {
    $(".toggle").click(function() {
        var $this = $(this);
        var state = parseInt($this.attr('aria-state')) || 0;
        state++;

        $this.text("toggle "+state);
        switch(state) {
            case 5:
                //action 5
                break;
            case 4:
                //action 4
                break;
            case 3:
                //action 3
                break;
            case 2:
                //action 2
                break;
            case 1:
                //action 1
                break;
        }

        if(state >= 5)
            state = 0;

        $this.attr('aria-state', state);
    });    
});

View on JSFiddle

For further enhancement, consider creating a jquery-ui widget and setting up event handlers for the 5 states.

Creating a toggle link with 5 different states in coding

Answer №1

Similar questions

How to use jQuery to add an unordered list between two elements

Can a Django form be configured to hide submitted values using display:none?

The form's validation fails to recognize dynamically added input after the initial validation

How can I modify the table structure in Ruby on Rails?

Stop Code Execution || Lock Screen

In Vuetify, components are distinct in their own unique way

Conceal an element along with its space, then signal the application to show alternative content using React

Issue "Invalid UTF-8" encountered while compiling sass using @import

JQuery transmits null values

Customizable form fields in AngularJS

Inquire regarding the header image. Can you confirm if the current HTML and CSS for this is the most efficient approach?

What is the best way to retrieve the current value of an *ngFor loop upon button click?

Can I programmatically retrieve a comprehensive list of all global HTML attributes available?

CSS - Resizing Images

Tips for accessing elements with dynamically assigned IDs in jQuery

Selenium: Mastering the Art of Label Clicking

What is the method for using jQuery to retrieve hidden fields with the visible attribute set to "false"?

An image inside this stylishly framed photo with rounded corners

Received a String instead of an Object while attempting to parse JSON data

Transfer information to a php file through ajax