Mixing
How to keep one icon name while clicking accordion item?
0
I am trying to make a accordion dynamic with php wordpress. But by which source i found the accordion works correctly in html. but when i am trying to make it dynamic the font awesome icon don't work correctly. The font awesome icon repeats two time when it get expand. you can see below image
the code is here
https://jsfiddle.net/nriddhi/zyj3ck5t/
js code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
how can i set font awesome icon class one time. and also when it will get expand there will only remain fa-minus icon and when will be closed there will be fa-plus icon. thanks for help....
javascript jquery
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
add a comment |
0
I am trying to make a accordion dynamic with php wordpress. But by which source i found the accordion works correctly in html. but when i am trying to make it dynamic the font awesome icon don't work correctly. The font awesome icon repeats two time when it get expand. you can see below image
the code is here
https://jsfiddle.net/nriddhi/zyj3ck5t/
js code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
how can i set font awesome icon class one time. and also when it will get expand there will only remain fa-minus icon and when will be closed there will be fa-plus icon. thanks for help....
javascript jquery
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
2
How is this a "php" question?
– Funk Forty Niner
Jan 2 at 22:13
The original HTML is:class="icon fa-plus". Then you addaddClass("plus fa-minus"). What result do you expect from that?
– Magnus Eriksson
Jan 2 at 22:14
when i make it dynamic, expanding time font awesome icon not work correctly, sometimes it comes first fa-plus, sometimes fa-minus, how to keep one icon name and correct one, is there any idea?
– Nayeem Hyder Riddhi
Jan 2 at 22:25
add a comment |
0
0
0
I am trying to make a accordion dynamic with php wordpress. But by which source i found the accordion works correctly in html. but when i am trying to make it dynamic the font awesome icon don't work correctly. The font awesome icon repeats two time when it get expand. you can see below image
the code is here
https://jsfiddle.net/nriddhi/zyj3ck5t/
js code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
how can i set font awesome icon class one time. and also when it will get expand there will only remain fa-minus icon and when will be closed there will be fa-plus icon. thanks for help....
javascript jquery
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
I am trying to make a accordion dynamic with php wordpress. But by which source i found the accordion works correctly in html. but when i am trying to make it dynamic the font awesome icon don't work correctly. The font awesome icon repeats two time when it get expand. you can see below image
the code is here
https://jsfiddle.net/nriddhi/zyj3ck5t/
js code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
how can i set font awesome icon class one time. and also when it will get expand there will only remain fa-minus icon and when will be closed there will be fa-plus icon. thanks for help....
javascript jquery
javascript jquery
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
edited Jan 2 at 22:16
Magnus Eriksson
7,61541328
7,61541328
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
asked Jan 2 at 22:04
Nayeem Hyder RiddhiNayeem Hyder Riddhi
143113
143113
2
How is this a "php" question?
– Funk Forty Niner
Jan 2 at 22:13
The original HTML is:class="icon fa-plus". Then you addaddClass("plus fa-minus"). What result do you expect from that?
– Magnus Eriksson
Jan 2 at 22:14
when i make it dynamic, expanding time font awesome icon not work correctly, sometimes it comes first fa-plus, sometimes fa-minus, how to keep one icon name and correct one, is there any idea?
– Nayeem Hyder Riddhi
Jan 2 at 22:25
add a comment |
2
How is this a "php" question?
– Funk Forty Niner
Jan 2 at 22:13
The original HTML is:class="icon fa-plus". Then you addaddClass("plus fa-minus"). What result do you expect from that?
– Magnus Eriksson
Jan 2 at 22:14
when i make it dynamic, expanding time font awesome icon not work correctly, sometimes it comes first fa-plus, sometimes fa-minus, how to keep one icon name and correct one, is there any idea?
– Nayeem Hyder Riddhi
Jan 2 at 22:25
2
2
How is this a "php" question?
– Funk Forty Niner
Jan 2 at 22:13
How is this a "php" question?
– Funk Forty Niner
Jan 2 at 22:13
The original HTML is:
class="icon fa-plus". Then you add addClass("plus fa-minus"). What result do you expect from that?– Magnus Eriksson
Jan 2 at 22:14
The original HTML is:
class="icon fa-plus". Then you add addClass("plus fa-minus"). What result do you expect from that?– Magnus Eriksson
Jan 2 at 22:14
when i make it dynamic, expanding time font awesome icon not work correctly, sometimes it comes first fa-plus, sometimes fa-minus, how to keep one icon name and correct one, is there any idea?
– Nayeem Hyder Riddhi
Jan 2 at 22:25
when i make it dynamic, expanding time font awesome icon not work correctly, sometimes it comes first fa-plus, sometimes fa-minus, how to keep one icon name and correct one, is there any idea?
– Nayeem Hyder Riddhi
Jan 2 at 22:25
add a comment |
3 Answers
3
active
oldest
votes
2
In your HTML, you have the fa-plus class already applied to each accordion item trigger. Then, in your javascript, you're re-applying the plus fa-plus classes to each trigger, creating the class duplication.
Simply removing the additional js below your event handler takes care of the duplication, and explicitly stating an addition/removal of plus fa-minus or fa-plus to each clicked item will handle the change modifications.
Now, if you want to make each declaration of the accordion item trigger icons 100% dynamic, you'd have to provide some additional code to showcase how you're generating said elements, but within the context of the information that you've provided, this is the appropriate fix.
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>UPDATED
@Chris Happy, thanks for pointing out the error in the solution. I've corrected the errors in the CSS display property, as well as the class toggling on the accordion items.
answered Jan 2 at 22:34
RyanRyan
522517
1
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
add a comment |
2
For this to work, you need to:
- Toggle the
.fa-plusclass when an item is clicked - Remove
.fa-plusclass at the beginning.
JS Code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus"); // Toggle `fa-plus` as well
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); // Remove `fa-plus`
$('.accordion li > div').first().show().addClass("plus");
Snippet:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>JSfiddle
Lastly, I'd recommend you caching $(el) or use the $this: Jsfiddle;
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
add a comment |
1
I don't think I entirely understand your question, but perhaps this is what you want: https://jsfiddle.net/9p3mx52k/
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li").each(function(i,el) {
if($(el).is(current_li)) {
if (current_li.find('> h5').hasClass('plus')) {
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
} else {
$(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
$(el).find('> div').addClass('plus').slideDown();
}
} else{
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
- You didn't target all the correct elements.
- The behavior is different depending on the state (open/closed, see
hasClass) on the clicked element, so you cannot simply use the toggle functions.
answered Jan 2 at 22:41
KafosoKafoso
323115
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013779%2fhow-to-keep-one-icon-name-while-clicking-accordion-item%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
In your HTML, you have the fa-plus class already applied to each accordion item trigger. Then, in your javascript, you're re-applying the plus fa-plus classes to each trigger, creating the class duplication.
Simply removing the additional js below your event handler takes care of the duplication, and explicitly stating an addition/removal of plus fa-minus or fa-plus to each clicked item will handle the change modifications.
Now, if you want to make each declaration of the accordion item trigger icons 100% dynamic, you'd have to provide some additional code to showcase how you're generating said elements, but within the context of the information that you've provided, this is the appropriate fix.
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>UPDATED
@Chris Happy, thanks for pointing out the error in the solution. I've corrected the errors in the CSS display property, as well as the class toggling on the accordion items.
answered Jan 2 at 22:34
RyanRyan
522517
1
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
add a comment |
2
In your HTML, you have the fa-plus class already applied to each accordion item trigger. Then, in your javascript, you're re-applying the plus fa-plus classes to each trigger, creating the class duplication.
Simply removing the additional js below your event handler takes care of the duplication, and explicitly stating an addition/removal of plus fa-minus or fa-plus to each clicked item will handle the change modifications.
Now, if you want to make each declaration of the accordion item trigger icons 100% dynamic, you'd have to provide some additional code to showcase how you're generating said elements, but within the context of the information that you've provided, this is the appropriate fix.
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>UPDATED
@Chris Happy, thanks for pointing out the error in the solution. I've corrected the errors in the CSS display property, as well as the class toggling on the accordion items.
answered Jan 2 at 22:34
RyanRyan
522517
1
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
add a comment |
2
2
2
In your HTML, you have the fa-plus class already applied to each accordion item trigger. Then, in your javascript, you're re-applying the plus fa-plus classes to each trigger, creating the class duplication.
Simply removing the additional js below your event handler takes care of the duplication, and explicitly stating an addition/removal of plus fa-minus or fa-plus to each clicked item will handle the change modifications.
Now, if you want to make each declaration of the accordion item trigger icons 100% dynamic, you'd have to provide some additional code to showcase how you're generating said elements, but within the context of the information that you've provided, this is the appropriate fix.
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>UPDATED
@Chris Happy, thanks for pointing out the error in the solution. I've corrected the errors in the CSS display property, as well as the class toggling on the accordion items.
answered Jan 2 at 22:34
RyanRyan
522517
In your HTML, you have the fa-plus class already applied to each accordion item trigger. Then, in your javascript, you're re-applying the plus fa-plus classes to each trigger, creating the class duplication.
Simply removing the additional js below your event handler takes care of the duplication, and explicitly stating an addition/removal of plus fa-minus or fa-plus to each clicked item will handle the change modifications.
Now, if you want to make each declaration of the accordion item trigger icons 100% dynamic, you'd have to provide some additional code to showcase how you're generating said elements, but within the context of the information that you've provided, this is the appropriate fix.
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>UPDATED
@Chris Happy, thanks for pointing out the error in the solution. I've corrected the errors in the CSS display property, as well as the class toggling on the accordion items.
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
if ($(el).is(":visible")) {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideUp().removeClass("plus");
} else {
$(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus");
$(el).slideDown().addClass("plus")
}
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>answered Jan 2 at 22:34
RyanRyan
522517
edited Jan 2 at 22:47
answered Jan 2 at 22:34
RyanRyan
522517
answered Jan 2 at 22:34
RyanRyan
522517
answered Jan 2 at 22:34
RyanRyan
522517
522517
1
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
add a comment |
1
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
1
1
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
Good catch @ChrisHappy. I've corrected my answer above.
– Ryan
Jan 2 at 22:48
add a comment |
2
For this to work, you need to:
- Toggle the
.fa-plusclass when an item is clicked - Remove
.fa-plusclass at the beginning.
JS Code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus"); // Toggle `fa-plus` as well
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); // Remove `fa-plus`
$('.accordion li > div').first().show().addClass("plus");
Snippet:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>JSfiddle
Lastly, I'd recommend you caching $(el) or use the $this: Jsfiddle;
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
add a comment |
2
For this to work, you need to:
- Toggle the
.fa-plusclass when an item is clicked - Remove
.fa-plusclass at the beginning.
JS Code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus"); // Toggle `fa-plus` as well
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); // Remove `fa-plus`
$('.accordion li > div').first().show().addClass("plus");
Snippet:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>JSfiddle
Lastly, I'd recommend you caching $(el) or use the $this: Jsfiddle;
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
add a comment |
2
2
2
For this to work, you need to:
- Toggle the
.fa-plusclass when an item is clicked - Remove
.fa-plusclass at the beginning.
JS Code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus"); // Toggle `fa-plus` as well
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); // Remove `fa-plus`
$('.accordion li > div').first().show().addClass("plus");
Snippet:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>JSfiddle
Lastly, I'd recommend you caching $(el) or use the $this: Jsfiddle;
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
For this to work, you need to:
- Toggle the
.fa-plusclass when an item is clicked - Remove
.fa-plusclass at the beginning.
JS Code:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus"); // Toggle `fa-plus` as well
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); // Remove `fa-plus`
$('.accordion li > div').first().show().addClass("plus");
Snippet:
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>JSfiddle
Lastly, I'd recommend you caching $(el) or use the $this: Jsfiddle;
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("fa-plus plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus");
$('.accordion li > div').first().show().addClass("plus");@charset "UTF-8";
.accordion {
max-width: 600px;
margin: 50px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
}
.accordion ul {
border-bottom: #ecebe9 solid 1px;
margin: 0;
padding: 0;
}
.accordion ul li {
border-left: #ecebe9 solid 1px;
border-right: #ecebe9 solid 1px;
list-style: none;
margin: 0;
}
.accordion ul li h5 {
font-size: 18px;
color: #333333;
font-weight: bold;
background: #f7f6f5;
border-top: #ecebe9 solid 1px;
border-left: #ecebe9 solid 0px;
border-right: #ecebe9 solid 0px;
margin: 0;
padding: 12px 15px 12px 50px;
line-height: 19px;
cursor: pointer;
position: relative;
}
.accordion ul li h5.plus {
border-bottom: #orange solid 1px;
background: orange;
color: #fff;
}
.accordion ul li > div {
color: #333333;
line-height: 24px;
padding: 15px 15px 15px 50px;
}
.accordion ul li > div a {
color: #7f0a19;
}
.accordion ul li h5.icon:before {
font-family: 'FontAwesome';
background: #777;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 14px;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 20px;
}
.accordion ul li h5.plus:before {
font-family: 'FontAwesome';
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
answered Jan 2 at 22:40
Chris HappyChris Happy
4,65811234
4,65811234
add a comment |
add a comment |
1
I don't think I entirely understand your question, but perhaps this is what you want: https://jsfiddle.net/9p3mx52k/
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li").each(function(i,el) {
if($(el).is(current_li)) {
if (current_li.find('> h5').hasClass('plus')) {
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
} else {
$(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
$(el).find('> div').addClass('plus').slideDown();
}
} else{
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
- You didn't target all the correct elements.
- The behavior is different depending on the state (open/closed, see
hasClass) on the clicked element, so you cannot simply use the toggle functions.
answered Jan 2 at 22:41
KafosoKafoso
323115
add a comment |
1
I don't think I entirely understand your question, but perhaps this is what you want: https://jsfiddle.net/9p3mx52k/
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li").each(function(i,el) {
if($(el).is(current_li)) {
if (current_li.find('> h5').hasClass('plus')) {
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
} else {
$(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
$(el).find('> div').addClass('plus').slideDown();
}
} else{
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
- You didn't target all the correct elements.
- The behavior is different depending on the state (open/closed, see
hasClass) on the clicked element, so you cannot simply use the toggle functions.
answered Jan 2 at 22:41
KafosoKafoso
323115
add a comment |
1
1
1
I don't think I entirely understand your question, but perhaps this is what you want: https://jsfiddle.net/9p3mx52k/
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li").each(function(i,el) {
if($(el).is(current_li)) {
if (current_li.find('> h5').hasClass('plus')) {
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
} else {
$(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
$(el).find('> div').addClass('plus').slideDown();
}
} else{
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
- You didn't target all the correct elements.
- The behavior is different depending on the state (open/closed, see
hasClass) on the clicked element, so you cannot simply use the toggle functions.
answered Jan 2 at 22:41
KafosoKafoso
323115
I don't think I entirely understand your question, but perhaps this is what you want: https://jsfiddle.net/9p3mx52k/
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li").each(function(i,el) {
if($(el).is(current_li)) {
if (current_li.find('> h5').hasClass('plus')) {
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
} else {
$(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
$(el).find('> div').addClass('plus').slideDown();
}
} else{
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
- You didn't target all the correct elements.
- The behavior is different depending on the state (open/closed, see
hasClass) on the clicked element, so you cannot simply use the toggle functions.
answered Jan 2 at 22:41
KafosoKafoso
323115
answered Jan 2 at 22:41
KafosoKafoso
323115
answered Jan 2 at 22:41
KafosoKafoso
323115
answered Jan 2 at 22:41
KafosoKafoso
323115
323115
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013779%2fhow-to-keep-one-icon-name-while-clicking-accordion-item%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
How is this a "php" question?
– Funk Forty Niner
Jan 2 at 22:13
The original HTML is:
class="icon fa-plus". Then you addaddClass("plus fa-minus"). What result do you expect from that?– Magnus Eriksson
Jan 2 at 22:14
when i make it dynamic, expanding time font awesome icon not work correctly, sometimes it comes first fa-plus, sometimes fa-minus, how to keep one icon name and correct one, is there any idea?
– Nayeem Hyder Riddhi
Jan 2 at 22:25