CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ramji Seetharaman
Ramji Seetharaman

Reputation: 574

Toggle Arrow right and up on click of a div

I am designing an accordion like layout and would want to toggle the arrow icons I show when I click on the div. I am able to toggle the content of the div. I want to do the same with the arrow icons.

This is what I have tried so far.

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

I want the right icon to toggle to down icon on click of the question. When I click again, it should toggle back to left icon. Since it is an FAQ page, I will have multiple questions and answers. So I want to do it for each.

Upvotes: 1

Views: 14137

Answers (6)

Jeremy
Jeremy

Reputation: 67

LOL, I would like to keep it simple by using tag:

<details>
  <summary>Test Question 1</summary>
  <p>Test Answer 1</p>
</details>

Upvotes: 0

Nikola Mitic
Nikola Mitic

Reputation: 1482

Although all the answers so far are good, and will do get the job done, I would advise you to do all of your styles using just one css state class. Also we should generalized things as much as possible so that solution can be applied with ease on every other project since accordion is very common.

You can fallow BEM standard but it's not required --> http://getbem.com/introduction/

The steps are as fallows:

  1. Have a wrapper for each accordion item, and there defined text and toggle btn

  2. Have one className 'active' || 'open' || whatever and style (hide, show, rotate etc) text and toggle btn using that class, like this: .accordion-item.active .toggle-btn { your stlyes here }

  3. Using JS add toggle class name on parent (.accordion-item) by clicking on toggle btn.

Please see full working example here --> https://codepen.io/nikolamitic/pen/PEqqZa

HTML 

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

</ul>

CSS

// default states
.accordion-item {
  &__paragraph {
    display: none;
  }
  &__btn {
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-plus-round-128.png');
    // You don't need to use bg image, you can use any what ever.
  }
}

// active states
.accordion-item--active {
  .accordion-item__paragraph {
    display: block;
  }
  .accordion-item__btn {
    background-image: url('http://cdn.onlinewebfonts.com/svg/img_161345.png');
  }
    // You don't need to use bg image, you can use apply any other css property ali transofrms or opacity or whaever.

}





// Example related styles - don't make an efort reading them

.accordion {
  width: 600px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.accordition-item__title {
  display: inline-block;
  margin: 0;
}

.accordion-item__btn {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    cursor: pointer;
}
.accordition-item {
  padding: 10px 0;
}

JS

const $accordionBtn = $('.accordion-item__btn');

$accordionBtn.on('click', (event) => {
  const $clickedAccordionItem = $(event.currentTarget).parents('.accordion-item');
  $clickedAccordionItem.toggleClass('accordion-item--active');
});

// So here we are using only one modifier and the rest of elemets needs to be modified with it using css with only two level nesting. It is per BEM so it is a safe.
// see --> http://getbem.com/naming/ section modifiers

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You can toggle active class on .fa to rotate icon with animation.

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(this).find(".fa").toggleClass('active');
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

.fa {
  transition: transform .2s;
}

.fa.active {
  transform: rotateZ(90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

Upvotes: 8

vishul malik
vishul malik

Reputation: 307

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(".fa-chevron-right").toggleClass("fa-chevron-down");
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

Upvotes: 1

larrymacbarry
larrymacbarry

Reputation: 139

    $(document).ready(function() {
      $(this).on("click", ".koh-faq-question", function() {
        $(this).parent().find(".koh-faq-answer").toggle();
        $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
      });
    });
    .koh-faqs-page-title {
      font-family: Nexa W01 Heavy;
      font-size: 30px;
      color: #04202E;
      font-weight: 700;
    }

    .koh-faq-question-span {
      font-family: Helvetica Neue LT Pro Roman !important;
      font-size: 16px !important;
      color: #000 !important;
      font-weight: 700 !important;
      display: inline-block;
    }

    .koh-faq-answer {
      font-family: Helvetica Neue LT Pro Roman;
      color: #000;
      font-weight: 400;
      display: none;
    }

    .icon {
      font-size: 10px;
      padding-right: 5px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="koh-tab-content">
      <div class="koh-tab-content-body">
        <div class="koh-faq">
          <div class="koh-faq-question">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
            <span class="koh-faq-question-span"> Test Question 1 </span>
          </div>
          <div class="koh-faq-answer">
            Test Answer 1
          </div>
        </div>
      </div>
    </div>

Upvotes: 1

Shubham
Shubham

Reputation: 539

Just toggle the fa-chevron-right class to fa-chevron-down class. I've added $('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" ); this line and chevron id to i tag.

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" );
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});
.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" id="chevron" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions