Add and Remove Attributes Using jQuery

Question

I'm teaching myself jQuery and made myself a tabbed container with Bootstrap.

I'm using a button group as the tabs for my 'container' (really just 4 panels) and to set one of the buttons as toggled on I need to use the data-toggle="button" attribute, but I'm unable to remove the attribute or give it to a new button when that one is made active. Currently the button that is initially set to toggled stays that way. I have no errors in my console.

Here is my HTML:

<div class="panel-set">

    <div class="tabs btn-group" role="group" aria-label="...">
      <button rel="panel1" type="button" class="tab-btn active btn btn-default" data-toggle="button">Tab 1</button>
      <button rel="panel2" type="button" class="tab-btn btn btn-default" data-toggle="">Tab 2</button>
      <button rel="panel3" type="button" class="tab-btn btn btn-default" data-toggle="">Tab 3</button>
      <button rel="panel4" type="button" class="tab-btn btn btn-default" data-toggle="">Tab 4</button>
    </div>

    <div id="panel1" class="panel active panel-primary">
    ...
    ...
</div>

Here is my javascript:

$(function() {

    $('.panel-set .tabs .tab-btn').on('click', function(){

        //Remove toggle and add to newly active button
        $('.panel-set .tabs .tab-btn.active').removeAttr('data-toggle');
        $('this').attr('data-toggle', 'button');

        //Figure out panel to show
        var panelToShow = $(this).attr('rel');

        //Hide current panel
        $('.panel-set .panel.active').hide( function(){

            $(this).removeClass('active');

            $('#'+panelToShow).show( function(){

                $(this).addClass('active');

            });
        });
    });
});

Jorge F · Accepted Answer · 2015-03-31 15:45:15Z

1

I don't know what you are trying to achieve but I think the data-toggle="button" adds the active class automatically, because I run some test with your code and I end up with this

$(function() {

    $('.panel-set .tabs .tab-btn').on('click', function(){

    //Remove toggle and add to newly active button, we loop through each button and then we remove the data-toggle and the active class in case it has something
    $(".tab-btn").each(function(){
        $(this).removeAttr("data-toggle");
        $(this).removeClass("active");
    });

    $(this).attr('data-toggle', 'button');

    //Figure out panel to show
    var panelToShow = $(this).attr('rel');

    //Hide current panel
    $('.panel-set .panel.active').hide( function(){

        $(this).removeClass('active');

        $('#'+panelToShow).show( function(){

            $(this).addClass('active');

            });
        });
    });
});

And it's working like a tab panel. I don't know if thats what you wanted

edited Mar 31, 2015 at 15:45

answered Mar 31, 2015 at 0:08

Jorge F

6931 gold badge12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JmJ Over a year ago

Hey, thanks, that achieves half of what I wanted to do which was remove data-toggle="button" when a new button was clicked, but I'm also trying to add that attribute to the latest button to be clicked. Sorry if I didn't explain myself well: this is what I want to do: getbootstrap.com/javascript/#buttons-single-toggle

Jorge F Over a year ago

jsfiddle.net/ugmkt1sz here is the fiddle I created with your code, actually to me it's removing the active class, adding the data-toggle="button" and the aria-pressed="true" with the active class to the button. Im not a native english speaker so maybe I'm not undersating the whole picture

JmJ Over a year ago

Thanks Jorge, that's just what I was looking for!

Collectives™ on Stack Overflow

Add and Remove Attributes Using jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related