slideDown not working on <div> Jquery

Question

I have it set to a div, not a span, I have the width and height of said div set in the CSS file, I think I have all the syntax properly set out, (since show/toggle work just fine), I just can't find a way to fix this. The in question is contained within a div class="col-md-4" which is contained within div class= "container". The text is already hidden when you open the page, so that isn't the problem. Hence, I haven't been able to find the answers. I basically just want the website user to click "View details", have the div slide down displaying text, the button to change to "Hide details"(this part works fine), then the Div to dissapear again when "hide details" is clicked.

https://jsfiddle.net/LLdmvm7s/3/ on here it seems to work, animation and all, but on the actual webpage it just doesn't. There's no animation, the text doesn't show. I wonder if its the image? I don't know, I'm still a beginner.

$(document).ready(function(){
$("#hiddentext1").hide();

    $("#button21").click(function(){
       $("#hiddentext1").slideDown();
       var txt = $(this).text();
       if (txt == "View details")
           {
               $(this).text('Hide details');
           }
       else 
           {
               $(this).text('View details');
           }
 }):     

Answer 1

you miss }); in the end

and there's a : which should be ;

$(document).ready(function(){
    $("#hiddentext1").hide();

    $("#button21").click(function(){
        $("#hiddentext1").slideToggle();
       var txt = $(this).text();
       if (txt == "View details")
           {
               $(this).text('Hide details');
           }
       else 
           {
               $(this).text('View details');
           }
    });
});