I have a unique accordion feature that expands to display further information when each button is clicked. While it works fine, I am facing an issue where the box seems to slide up and down multiple times before showing the full content. Ideally, I would like it to slide up and down just twice or maybe three times at most before displaying the complete content. Can you suggest the best way to achieve this?
Here is the HTML code:
<div id="ss_menu">
<h3><b>Winning Ways</b></h3>
<div class="ss_button">1990-1991</div>
<div class="ss_content">1st NBA Title<br />
61 Wins 21 Losses<br />MVP Michael Jordan<br />
Defeated LA Lakers<br /></div>
<div class="ss_button">1991-1992</div>
<div class="ss_content">Repeat Champions<br />
67 Wins 15 Losses<br />MVP Michael Jordan<br />
<div class="ss_button">1992-1993</div>
<div class="ss_content">ThreePeat Champions<br />57 Wins 25 Losses<br />
MVP Michael Jordan<br />Defeated Phoenix Suns<br /></div>
<div class="ss_button">1995-1996</div>
<div class="ss_content">1st NBA Title in 3 years<br />
72 Wins 10 Losses<b>(NBA history)</b><br />MVP Michael Jordan<br />
<b>*Michael Jordan came back from retirement!</b><br />Defeated LA
Lakers<br /></div> <div class="ss_button">1996-1997</div>
<div class="ss_content">2nd Repeat<br />69 Wins 13 Losses<br />
MVP Michael Jordan<br />Defeated Utah Jazz<br /></div>
<div class="ss_button">1997-1998</div> <div class="ss_content">
2nd ThreePeat<br />62 Wins 20 Losses<br />MVP Michael Jordan<br />
Defeated Utah Jazz<br /></div>
</div>
And the CSS code for styling:
body {
font-family: Arial, Helvetica, sans-serif;
}
#ss_menu h3{
color: white;
}
#ss_menu {
width: 200px;
position:absolute;
right:10px;
top:825px;
z-index:1
}
.ss_button {
background-color: black;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
color: #FFFFFF;
border-radius: 5px;
}
.ss_content {
background-color: #EFEFEF;
display: none;
padding: 10px;
border-radius: 5px;
}
Lastly, here is the JavaScript function:
jQuery(function () {
jQuery('.ss_button').on('click', function () {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});