Toggle Up and Down Arrows in a Simple Accordion Widget

Toggle between arrows is not working when open/close accordion

check updated FIDDLE

add below code . $('.fa') remove fa-chevron-up from i element which contain "fa" class and add class fa-chevron-down.

     if(event.handled !== true) {

        $('.fa').removeClass('fa-chevron-up').addClass('fa-chevron-down');

Jquery Accordion with Font Awesome Toggle

here is a working code :

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

      if($(this).next("div").is(":visible")){
        $(this).next("div").slideUp("slow");
        $(this).children().toggleClass("fa-angle-up fa-angle-down");
      } else {
        $(".accordion-toggle").next("div").slideUp("slow");
        $(".accordion-toggle i").attr("class", "fa fa-angle-down");
        $(this).next("div").slideDown("slow");
        $(this).children().toggleClass("fa-angle-up fa-angle-down");
      }
});
});

You need to close all the tab before open the one who is clicked.

Have a good one.

http://jsbin.com/cizoziqiji/2/

Jquery toggle div with arrow animation fontawesome css

EDIT Some bugs fixed, new version is here https://jsfiddle.net/mhL3yken/57/

Take a look at this snippet. Hope it helps!

$(".filter-groep").on('click', function(){ var $filterContent = $(this).children(".filter-content");  var $arrow = $(this).find(".fa-caret-down");   if(!$filterContent.hasClass("opened")){   $filterContent.addClass("opened").slideDown(200);    $arrow.addClass("rotated");  } else if($filterContent.hasClass("opened")){   $filterContent.removeClass("opened").slideUp(200);    $arrow.removeClass("rotated");  }});

* {  box-sizing: border-box;}
body {  font-family: sans-serif;  margin: 0;}
.filter-groep {  width: 300px;  cursor: pointer;}.filter-groep .filter-title {  width: 100%;  background-color: #3276e5;  border-bottom: 2px solid #2861bf;  color: #fff;  padding: 20px;  margin: 0;}.filter-groep .filter-title .tooltip-info {  font-size: 12px;}.filter-groep .filter-content {  display: none;  width: 100%;  background-color: #ededed;  padding: 10px 20px;  font-size: 14px;}
.fas {  transition: transform 200ms ease-in-out;}
.rotated {  transform: rotate(180deg);  transition: transform 200ms ease-in-out;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><head>  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"></head>
<div class="filter-groep">    <h3 class="filter-title">    <i class="fas fa-caret-down"></i>    Filter Title        <div class="tooltip-info">            <div class="tooltip-info-container">                Some tooltip information            </div>        </div>    </h3>    <div class="filter-content">        Filter content    </div></div><div class="filter-groep">    <h3 class="filter-title">    <i class="fas fa-caret-down"></i>    Filter Title        <div class="tooltip-info">            <div class="tooltip-info-container">                Some tooltip information            </div>        </div>    </h3>    <div class="filter-content">        Filter content    </div></div><div class="filter-groep">    <h3 class="filter-title">    <i class="fas fa-caret-down"></i>    Filter Title        <div class="tooltip-info">            <div class="tooltip-info-container">                Some tooltip information            </div>        </div>    </h3>    <div class="filter-content">        Filter content    </div></div>

How do I expand and collapse (i.e. toggling) a table row (tr)?

You can try a class "Accordion" which has the similar functionality.

You can find it here in detail.

How to position the Angular Material expansion panel arrow icon on the left-hand side

first you need to import angular material icon and expansion panel module in app.module.ts file,

import {MatExpansionModule,MatIconModule} from '@angular/material';
...
@NgModule({
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
})
export class AppModule { }

Add this code in your HTML file,

    <mat-expansion-panel expanded='true' hideToggle="true" (click)="click()">
      <mat-expansion-panel-header [ngClass]="tickets-container-header">
        <mat-panel-title>
            <mat-icon>{{icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>
            <div  class="col-md-9">
            {{header}} 
            </div>
        </mat-panel-title>

      </mat-expansion-panel-header>
    </mat-expansion-panel>

Add this code in your component file,

icon: boolean = false;

click(){
    this.icon = !this.icon;
  }

Thanks,

How can you hide the arrow that is displayed by default on the HTML5 details element in Chrome?

I didn't plan to answer my own question but I have the solution.

Source:
http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
More about the recommendation for the disclosure widget:

http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

Code

details summary::-webkit-details-marker {
  display:none;
}

Note that the disclosure widget will still be displayed if you don't provide a summary element, which is allowed by the spec.