CODEWITHSUNDEEP
jquerycss
Dan Lee
Dan Lee

Reputation: 704

Add remove border on click

I'm trying to add and remove the class .accord-header-border on .accord-header so that it shows and hides a border line. I can toggle it on and off on the click. The issue is how to add logic that removes it when I click on a different panel.

View the JSFiddle to see how this works...

$(document).ready(function () {
    $(".accordion .accord-header").click(function () {

        var im = $(this).find('img');
        $('.rotate2').not(im).removeClass('rotate2');
        im.toggleClass('rotate2');

    // The toggle on the border
        $(this).toggleClass('accord-header-border');


        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp("normal");


        } else {
            $(".accordion .accord-content").slideUp("normal");
            $(this).next("div").slideToggle("normal");
        }
    });
});

Upvotes: 0

Views: 793

Answers (4)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can make use of .not() as you did for rotate2, see below code -

$(document).ready(function () {
    $(".accordion .accord-header").click(function () {

        var im = $(this).find('img');
        $('.rotate2').not(im).removeClass('rotate2');
        im.toggleClass('rotate2');

        //add accord-header-border to other elements
       $('.accordion .accord-header').not(this).addClass('accord-header-border');
    // The toggle on the border
        $(this).toggleClass('accord-header-border');


        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp("normal");


        } else {
            $(".accordion .accord-content").slideUp("normal");
            $(this).next("div").slideToggle("normal");
        }
    });
});

Upvotes: 1

Guffa
Guffa

Reputation: 700582

You can use the hasClass method to check if the clicked item is the current item, and do different things depending on that:

if ($(this).hasClass('accord-header-border') {
  $(this).removeClass('accord-header-border');
} else {
  $(".accordion .accord-header.accord-header-border").removeClass('accord-header-border');
  $(this).addClass('accord-header-border');
}

Upvotes: 0

Alex Olkhovskii
Alex Olkhovskii

Reputation: 136

Just add

$('.accordion .accord-header').removeClass('accord-header-border');

before

$(this).toggleClass('accord-header-border');

It will remove borders for all elements.

Upvotes: 0

Manik Arora
Manik Arora

Reputation: 4792

You need to remove the class from all the panels or from where ever you need it to be removed and then add on the panel on which is clicked. Like this below-

$(document).ready(function () {
    $(".accordion .accord-header").click(function () {
        //Added the below line to remove the class from all panels
        $('.accord-header-border').removeClass('accord-header-border');
        var im = $(this).find('img');
        $('.rotate2').not(im).removeClass('rotate2');
        im.toggleClass('rotate2');

    // The toggle on the border
        $(this).toggleClass('accord-header-border');


        if ($(this).next("div").is(":visible")) {
            $(this).next("div").slideUp("normal");


        } else {
            $(".accordion .accord-content").slideUp("normal");
            $(this).next("div").slideToggle("normal");
        }
    });
});

Upvotes: 0

Related Questions