I recently embarked on my journey to learn jQuery. I encountered a challenge with a simple button that triggers the slideToggle function to show/hide a div. Directly above this toggled div, there is an
break line which I want to hide when the button is initially clicked to open the div, and then show again when clicked to close the div. Any guidance or assistance on solving this issue would be highly appreciated.
Here is the code snippet along with a basic example on jsfiddle:
https://jsfiddle.net/ewsrq961/1/
Thank you for your help.
HTML:
<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>
<div id="actionsBtn">
<a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>
CSS:
#actionItems {
display: none;
padding-bottom: 15px;
}
#actionsBtn {
text-align: center;
background-color: #252d44;
width: 120px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 0;
margin-bottom: 20px;
color: #fff !important;
padding:5px;
}
#actionsBtn a {
color: #fff;
}
JS:
// Hide/Show div
$("#btnAction").click(function(){
$("#actionItems").slideToggle();
$(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});