Looking to slide down a div and then slide it back up when a button is clicked. After searching on Google, I found a solution but unfortunately, the slide up function is not working as expected. When the button is clicked, the div slides down correctly but does not slide back up when clicked again.
$(function () {
$(document).on("click", 'a.details', function (ev) {
if ($(".show").is(":hidden")) {
$(this).next('div').slideDown('slow');
}
else
$(this).next('div').slideUp('slow');
});
});<asp:DataList ID="dtlRoomsPrice" Visible="false" orizontalAlign="center" runat="server" ShowFooter="False" ShowHeader="False" Width="700px" OnItemDataBound="dtlRoomsDetails_ItemDataBound"> <ItemTemplate>
<a href="javascript:void(0);" class="details">Show Details</a> <div class="show" id="div_ID" style="width:687px;border-radius: 5px; box-shadow: 7px 6px 5px #888888; border: 2px solid gray; display:none;padding: 5px; ">
<asp:Label ID="lblAmiintiesTxt" runat="Server" CssClass="shbe_label" Text="<%$ Resources:Resource,Amenities %>" Visible="false"></asp:Label>
<p style="margin-top: 0px;margin-bottom: 0px;font-family: sans-serif; font-weight: bold; font-size: small;">Amenities</p>
<asp:Label ID="lblAmiinties" runat="Server" CssClass="shbe_h2" Text='<%# Eval("Amenities") %>' Visible="true"></asp:Label><br />
<asp:Label ID="lblCanclText" Width="130" runat="server" CssClass="shbe_label" Visible="false" Text="<%$ Resources:Resource, Payment and Cancellation policy %>"></asp:Label>
<p style="margin-bottom: 0px;font-family: sans-serif; font-weight: bold; font-size: small;">CancellationPolicy</p>
<asp:Label ID="lblCancelation" runat="Server" CssClass="shbe_h2" Text='<%# Eval("CancellationPolicyText") %>' Visible="true"></asp:Label>
</div> </ItemTemplate> </asp:DataList>