CODEWITHSUNDEEP
jquerytwitter-bootstrap
C Davies
C Davies

Reputation: 119

toggle state doesn't change when another is clicked

Currently, the icon needs to be clicked in order to change state. I'm trying to have the state change when another is clicked

$(document).ready(function() {
  $('.accordian-content').hide();
  $('.accordian-title').click(function() {
    $(this).find('.accordian-title-icon').toggleClass('accordian-title-icon-open')
    $('.accordian-content').not($(this).next('.accordian-content')).slideUp();
    $(this).next('.accordian-content').slideToggle();
  });
});

Upvotes: 0

Views: 43

Answers (1)

Shubham Agrawal
Shubham Agrawal

Reputation: 417

Try this code:

    $(document).ready(function() {
  $('.accordian-content').hide();
  $('.accordian-title').click(function() {
  const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
  	$('.accordian-title-icon').removeClass('accordian-title-icon-open');
    $('.accordian-content').not($(this).next('.accordian-content')).slideUp();
    $(this).next('.accordian-content').slideToggle();
    if(!flag) {
    $(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
    } else {
     $(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
    }
  });
});

Upvotes: 1

Related Questions