Jquery toggle div with arrow animation fontawesome css
Question
I got a filter menu with a lot of DIVS. All with the same classes:
<div class="filter-groep">
<h3 class="filter-title">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>
I tried many different ways but most of them are not what I am looking for.
I tried the JSfiddle of this post: Toggle up and down arrows in a simple accordion widget
http://jsfiddle.net/nandhakumarsri9/gu7h3/8/
But this is an accordion, so one div closes when other one opens. I want to open and close them seperatly and I want the arrows to animate on open and close.
Also the arrows are done with some strange border CSS, I know you can do it with CSS and FontAwesome Icons.
Anyone done this before?
3 answers
solution1
3 ACCPTED 2018-07-12 13:39:35
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>
solution2
0 2018-07-12 13:31:49
Below I've reproduced a sample using your html :
Snippet :
$('.filter-groep').each(function() { var $accordian = $(this); $accordian.find('.filter-title').on('click', function() { if (!$(this).next().is(':visible')) { $(this).removeClass('close').addClass('open'); $(this).find("i").removeClass("fa-angle-down").addClass("fa-angle-up"); $(this).next().slideDown(); } else { $(this).removeClass('open').addClass('close'); $(this).find("i").removeClass("fa-angle-up").addClass("fa-angle-down"); $(this).next().slideUp(); } }); });
/*Accordian*/ .filter-groep { width: 100%; background-color: #EDEDED; } .filter-groep .filter-title { color: #fff; background-color: #3A84DE; border-bottom: 1px solid #fff; position: relative; padding: 13px; font-size: 0.87em; cursor: pointer; overflow: hidden; } .filter-title .icon { float:right; right:10px; } .fa { font-size: 30px !important; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter-groep"> <h3 class="filter-title open">Filter Title <div class="icon"><i class="fa fa-angle-up"></i></div> <div class="tooltip-info"> <div class="tooltip-info-container"> Some tooltip information </div> </div> </h3> <div class="filter-content"> Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter content </div> </div> <div class="filter-groep"> <h3 class="filter-title open">Filter2 Title <div class="icon"><i class="fa fa-angle-up"></i></div> <div class="tooltip-info"> <div class="tooltip-info-container"> Some tooltip information </div> </div> </h3> <div class="filter-content"> Filter content Filter content Filter contentFilter content Filter content Filter contentFilter content Filter content Filter content </div> </div>
solution3
0 2018-07-12 13:39:28
It's pretty easy to make an accordion. You could look at the source code from jqueryUI accordion to understand better.
Also the arrows are done with some strange border CSS - no, that's not strange at all. It's a common practice. Why load an entire library ( fontAwesome ) if you need it for just some arrows that you can reproduce with CSS ?
To animate them, just use only one arrow ( not two as in your example ) and rotate it together with transition ( if that is the animation you were looking for ).
For the second thing, to be able to have all opened at the same time it's very straight forward. Just look at the code i wrote for you bellow.
let title = $('.filter-title') title.on('click', function() { let content = $('.filter-content') let state = $(this).attr('class') state === 'open' ? $(this).attr('class', 'close') : $(this).attr('class', 'open') $('.open').next(content).slideDown() $('.close').next(content).slideUp() })
h3 { padding: 15px; background: red; cursor: pointer; position: relative; margin: 0; } h3:after { position: absolute; right: 15px; top: 50%; border: 10px solid transparent; border-top-color: #F3F3F3; transition: 0.3s ease-out; content: ""; } h3.open:after { transform: rotate(180deg) translateY(50%) } .filter-content { display: none; background: blue; padding: 15px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter-groep"> <h3 class="filter-title">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">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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.