Добрый вечер, попробовал сделать аккордион на jquery, вроде бы все в норме, только мне не нравится анимация на плюсике, а точней когда кликаешь и разворачивается аккордион, и из плюса получается минус, он как бы просто исчезает, а хотелось чтобы была анимация такая же как когда из минуса получается плюс, вероятно где то еще в css можно было бы что то по другому реализовать, в общем нужна ваша хелпа )
песочница:
https://codepen.io/evgeniyproweb/pen/WXNPOK
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| ul.accord_list
li.accord_item
h2.accord_title.accord_title_show Статья номер 1
.accord_inner
.accord_img_wrap
img.accord_img(src='https://images.unsplash.com/photo-1497796742626-fe30f204ec54?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&')
.accord_text
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ab cumque repellat consequuntur maxime dolor modi aliquid ad. Eveniet suscipit quas qui consequatur cum! Modi, velit culpa. Non, vitae. Pariatur.
li.accord_item
h2.accord_title.accord_title_show Статья номер 2
.accord_inner
.accord_img_wrap
img.accord_img(src='https://images.unsplash.com/photo-1497796742626-fe30f204ec54?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&')
.accord_text
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ab cumque repellat consequuntur maxime dolor modi aliquid ad. Eveniet suscipit quas qui consequatur cum! Modi, velit culpa. Non, vitae. Pariatur.
li.accord_item
h2.accord_title.accord_title_show Статья номер 3
.accord_inner
.accord_img_wrap
img.accord_img(src='https://images.unsplash.com/photo-1497796742626-fe30f204ec54?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&')
.accord_text
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ab cumque repellat consequuntur maxime dolor modi aliquid ad. Eveniet suscipit quas qui consequatur cum! Modi, velit culpa. Non, vitae. Pariatur.
li.accord_item
h2.accord_title.accord_title_show Статья номер 4
.accord_inner
.accord_img_wrap
img.accord_img(src='https://images.unsplash.com/photo-1497796742626-fe30f204ec54?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&')
.accord_text
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ab cumque repellat consequuntur maxime dolor modi aliquid ad. Eveniet suscipit quas qui consequatur cum! Modi, velit culpa. Non, vitae. Pariatur. |
|
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| .accord_list {
max-width: 60%;
margin: 20px auto;
}
.accord_item {
text-align: center;
}
.accord_title {
position: relative;
display: inline-block;
padding: 0 0 0 35px;
margin: 0 0 20px;
font-size: 28px;
font-weight: bold;
color: lightblue;
cursor: pointer;
&:before {
content: '';
position: absolute;
width: 16px;
height: 3px;
background: red;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
@keyframes plus {
0% {transform: rotate(0deg);}
100% {transform: rotate(90deg);}
}
.accord_title_show {
&:after {
content: '';
position: absolute;
width: 16px;
height: 3px;
background: red;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(90deg);
animation: plus .3s ease-in;
}
}
.accord_img_wrap {
width: 25%;
margin: 0 auto;
padding: 0 0 20px;
}
.accord_img {
max-width: 100%;
height: auto;
display: block;
}
.accord_text {
padding: 20px;
margin: 0 0 20px;
border-radius: 10px;
background: #ccc;
} |
|
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $(function(){
$('.accord_inner').hide();
$('.accord_title').click(function(){
var accord = $(this).next('.accord_inner');
if(accord.is(':hidden')) {
accord.slideDown();
$(this).removeClass('accord_title_show');
} else {
accord.slideUp();
$(this).addClass('accord_title_show');
}
});
}); |
|
(
