【HTML】
<article>
<h3 class="accordion-title act">ここをクリックすると開閉</h3>
<div class="accordion-content">
<p>ここに内容が入ります</p>
</div>
</article>

<article>
<h3 class="accordion-title act">ここをクリックすると開閉</h3>
<div class="accordion-content">
<p>ここに内容が入ります</p>
</div>
</article>

<article>
<h3 class="accordion-title act">ここをクリックすると開閉</h3>
<div class="accordion-content">
<p>ここに内容が入ります</p>
</div>
</article>
・
・
・

【CSS】
article{
margin-bottom:10px;
}
article p:nth-child(n + 2) {
margin-top:1rem;
}
.accordion-title {
position: relative;
margin: 0;
padding: 0.8em 2.4rem 0.8em 1.2rem;
background-color: #fff;
font-size: 1.6rem;
font-weight: bold;
color: #181818;
cursor: pointer;
border:solid 1px #181818;
}
.accordion-title::before {
content: "";
position: absolute;
top: 50%;
right: 12px;
width: 15px;
height: 2px;
transform: rotate(90deg);
background: #181818;
transition: all .3s ease-in-out;
}
.accordion-container .accordion-title::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
width: 15px;
height: 2px;
background: #181818;
transition: all .2s ease-in-out;
}
.accordion-title.open::before {
transform: rotate(180deg);
}
.accordion-container .accordion-title.open::after {
opacity: 0;
}
.accordion-content {
display: none;
padding:8px;
border: 1px solid #181818;
border-top-color: transparent;
background:#fff;
}

【JS】
$(function(){
$('.act').click(function(){
var clicks = $(this).data('clicks');
$(".act").not(this).removeClass("open");
$(this).toggleClass('open');
$(".act").not(this).next().slideUp(300);
$(this).next().slideToggle();
if (clicks) {
} else {
var top = $(this).offset().top;
$('html,body').animate({scrollTop:top},300);
}
$(this).data("clicks", !clicks);
});
});