CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Iulian Alexandru
Iulian Alexandru

Reputation: 19

Button keeping the style

Whenever i press one of the buttons they change to .active css (this is good) but the problem is : when i click another button , they change to the .active css (which is good), but the previous button keeps their .active css, i dont want that , after i click another i want them to take the default css and just the button that is pressed to take the .active css HTML

<button id="btn1">a</button>
<button id="btn2">b</button>
<button id="btn3">c</button>
<button id="btn4">d3</button>
<button id="btn5">e 4</button>
<button id="btn6">f 5</button>
<button id="btn7">g 6</button>
<button id="btn8">h 7</button>
<div class="divToHide" id="story">story</div>
<div class="divToHide" id="z1">1</div>
<div class="divToHide" id="z2">2</div>
<div class="divToHide" id="z3">3</div>
<div class="divToHide" id="z4">4</div>
<div class="divToHide" id="z5">5</div>
<div class="divToHide" id="z6">6</div>
<div class="divToHide" id="z7">7</div>

CSS

#z1, #z2, #z3, #z4, #z5, #z6, #z7 {
    display: none;
}
.active {
    color: red;
}

JS

$(function () {

    $('#btn1').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#story').fadeToggle(400);
    });

    $('#btn2').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z1').fadeToggle(700);
    });

    $('#btn3').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z2').fadeToggle(700);
    });

    $('#btn4').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z3').fadeToggle(700);
    });

    $('#btn5').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z4').fadeToggle(700);
    });

    $('#btn6').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z5').fadeToggle(700);
    });

    $('#btn7').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z6').fadeToggle(700);
    });

    $('#btn8').on('click', function () {
        $('.divToHide').hide();
        $(this).toggleClass('active');
        $('#z7').fadeToggle(700);
    });

});

Upvotes: 1

Views: 65

Answers (3)

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24590

Add this line in line 2:

 // After This Line:
 // $(function () {

 $("button").click(function () {$('button').removeClass('active')});

The above code will remove active class for all buttons when you click on one of the buttons.

Upvotes: 2

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

General tip: Don't repeat jQuery code (especially as it already uses this). Apply a class to all buttons (to allow group selection) and data-drive any additional requirements (like your target elements) from data- attributes.

For this example I just surrounded the buttons in a div so they could all be selected together.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/pEA9R/

$(function () {
    $(document).on('click', 'button', function () {
        var $this = $(this);

        // Fetch the data-id attribute value for our target element
        var target = $this.data('id');

        // remove the active class from all buttons
        $('#buttons button').removeClass('active');

        // Hide all target divs
        $('.divToHide').hide();

        // highlight the clicked item
        $this.addClass('active');

        // Show the required div
        $('#' + target).fadeToggle(400);
    });

});

This also uses the delegated version of on. So you could make it listen on the parent of the buttons, rather than document to make is slightly more efficient:

    $('#button').on('click', 'button', function () {

Delegated events are great because they only create a single handler connection, and even support dynamically added items (added somewhere within the target ancestor).

Upvotes: 4

JabberwockyDecompiler
JabberwockyDecompiler

Reputation: 3390

Create a separate function that removes all active class css from your html. Place the following statement in that function and call it from each button click event. $("button").removeClass('active');

EDIT: It would be best to wrap your buttons in a div with an id say.. buttonWrapper and use the following code instead. $("buttonWrapper > button").removeClass('active');

Upvotes: 0

Related Questions