C Davies
Reputation: 119
how to have the first accordion in each section start open, but ALSO behave independently of the other section
//Accordian jQuery
$(document).ready(function () {
$('.accordian-content').hide();
$(".accordian-content:first").slideDown();
$('.accordian-title').click(function () {
const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
$('.accordian-title-icon').removeClass('accordian-title-icon-open');
$('.accordian-content').not($(this).next('.accordian-content')).slideUp();
$(this).next('.accordian-content').slideToggle();
if (!flag) {
$(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
//Add this code
/* thisE = $(this)
setTimeout(function () {
$('html, body').animate({
scrollTop: thisE.offset().top -75 }, 'slow');
}, 450)//Wait for toggle animation to finish */
} else {
$(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
}
});
}); .priority-lists {width:100%;}
.accordian-title {
width: 100%;
cursor: pointer;
padding: 20px 10px 20px 20px;
font-size: 20px;
}
.accordian-item {
color: rgba(40, 150, 211, 1);
margin: 10px auto;
width: 100%;
max-width: 530px;
background: #fff;
border: solid 1px #f0f0f0;
border-radius: 5px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.accordian-item:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.accordian .accordian-item .accordian-title .accordian-title-icon {
background: #dedede;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: white;
font-weight: 700;
margin-right: 0;
padding: 0 0 0 1px;
position: relative;
vertical-align: top;
float: right;
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
}
.accordian .accordian-item .accordian-title .accordian-title-icon:before {
content: '+';
display: block;
position: absolute;
width: 100%;
font-size: 21px;
line-height: 24px;
margin: -1px;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
display: none;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
content: '-';
margin-top: -3px;
margin-left: -1px;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
.accordian-content {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}
.accordian-content2 {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>Im trying to have the first accordion in each section start open, but ALSO behave independently of the other section (ie, when you open close accordion items in one section, the other section is unaffected and vice-versa.
I've added $(".accordian-content:first").slideDown(); and this works but is only applied to the very first one
Upvotes: 4
Views: 48
Answers (1)
Dekel
Reputation: 62566
Instead of close all of the .accordian-content elements - you would want to close only those that are part of the current accordion:
$(this).parents('.accordian').find('.accordian-content')
Here is the fix in your code:
//Accordian jQuery
$(document).ready(function () {
$('.accordian-content').hide();
$(".accordian .accordian-item:first-child .accordian-content").slideDown();
$('.accordian-title').click(function () {
const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
$(this).parents('.accordian').find('.accordian-title-icon').removeClass('accordian-title-icon-open');
$(this).parents('.accordian').find('.accordian-content').not($(this).next('.accordian-content')).slideUp();
$(this).next('.accordian-content').slideToggle();
if (!flag) {
$(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
//Add this code
/* thisE = $(this)
setTimeout(function () {
$('html, body').animate({
scrollTop: thisE.offset().top -75 }, 'slow');
}, 450)//Wait for toggle animation to finish */
} else {
$(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
}
});
});.priority-lists {width:100%;}
.accordian-title {
width: 100%;
cursor: pointer;
padding: 20px 10px 20px 20px;
font-size: 20px;
}
.accordian-item {
color: rgba(40, 150, 211, 1);
margin: 10px auto;
width: 100%;
max-width: 530px;
background: #fff;
border: solid 1px #f0f0f0;
border-radius: 5px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.accordian-item:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
}
.accordian .accordian-item .accordian-title .accordian-title-icon {
background: #dedede;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: white;
font-weight: 700;
margin-right: 0;
padding: 0 0 0 1px;
position: relative;
vertical-align: top;
float: right;
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
}
.accordian .accordian-item .accordian-title .accordian-title-icon:before {
content: '+';
display: block;
position: absolute;
width: 100%;
font-size: 21px;
line-height: 24px;
margin: -1px;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
display: none;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
content: '-';
margin-top: -3px;
margin-left: -1px;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
.accordian-content {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}
.accordian-content2 {
color: #3a3a3a;
padding: 0 20px 20px;
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>
<h2>SECTION 2</h2>
<div class="priority-lists">
<div class="accordian">
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence.</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>This is a sentence</p>
</div>
</div>
<div class="accordian-item">
<div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
<div class="accordian-content" style="display: none;">
<p>this is a sentence</p>
</div>
</div>
</div>In order to set the first element in each accordion to be open I used
$(".accordian .accordian-item:first-child .accordian-content").slideDown();
Upvotes: 1
Related Questions
- jQuery Accordion multiple sections open at once
- Multiple accordions simultaneously open. How to open only 1 JQuery accordion at a time
- JS Accordion that only closes its own section and not other sections
- How to open only 1 accordion at one time
- One accordion open at a time
- jQuery Accordion - open specific section on pageload
- Only One Accordion Panel Open At A Time
- jQuery accordion - one open at a time
- How to have only one opened accordion?
- jquery accordion open a section